Nuxt按页面更改图标

问题描述

在某些情况下，某些路线需要使用其他图标。 我尝试将这段代码扔到头上，尽管它确实起作用，但它在前一个代码图标的下面添加了另一个图标，并且不会覆盖它。

page.vue：

head () {
    return {
        title: 'my website title',link: [{
            rel: 'icon',type: 'image/x-icon',href: 'https://s.yimg.com/rz/l/favicon.ico'
        }]
    }
}

<link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
<link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://s.yimg.com/rz/l/favicon.ico">

您如何覆盖图标图标？

解决方法

在hid中的收藏夹图标中添加nuxt.config.js：

link: [{
    hid: 'icon',rel: 'icon',type: 'image/x-icon',href: 'link-to-fallback-favicon.png'
}]

您现在可以使用相同的隐藏方法在页面head中覆盖它：

head()
    return {
        link: [{
        hid: 'icon',href: 'link-to-new-favicon.png'
}]

一旦导航到该页面，Nuxt就会自动覆盖，而当您离开该页面时，Nuxt将使用nuxt.config.js中的常规名称。

,

我认为此链接可以为您提供帮助

https://reactgo.com/nuxt-change-favicon/

1. 在您喜欢的代码编辑器中打开nuxt应用。
2. 导航到静态文件夹并删除favicon.ico文件。
3. 现在，在静态文件夹中添加一个新的图标。
4. 重新加载您的nuxt应用程序以查看新的图标。