Nuxt 按页更改图标

Question

我在某些情况下某些路线需要不同的图标。我试过把这段代码扔在脑子里，虽然这确实有效，但它在前一个下面添加了另一个图标，并且不会覆盖它。

页面.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">

你如何去覆盖一个网站图标？

Answer 1

在hid中的 favicon添加一个nuxt.config.js：

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

您现在可以head使用相同的 hid在 pages方法中覆盖它：

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

一旦您导航到该页面，Nuxt 将自动覆盖，并在您离开时使用 nuxt.config.js 中的常规一次。