时间戳

首页 > 解决方案 > Nuxt 按页面更改图标

html - Nuxt 按页面更改图标

问题描述

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

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

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

标签： htmlnuxt.jsfavicon

解决方案

将 a 添加hid到 favicon 中nuxt.config.js：

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

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

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

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

推荐阅读