vue-head 插件设置浏览器顶部 favicon 图标 - 动态管理 html 文档头部标签内容

在Vue.js中，可以使用vue-head插件来动态管理浏览器的标题和favicon图标。以下是如何设置浏览器顶部的标题和favicon的示例代码：

首先，确保已经安装了vue-head插件：

npm install vue-head --save

然后，在你的Vue项目中进行配置：

1. 在main.js中引入并使用vue-head插件：

import Vue from 'vue';
import VueHead from 'vue-head';
 
Vue.use(VueHead, {
  // 默认标题
  title: 'Your Page Title',
  // 默认favicon
  meta: {
    description: 'default description',
    keywords: 'default, keywords',
    viewport: 'width=device-width, initial-scale=1'
  },
  // 默认的其他头部标签
  script: [],
  style: [],
  base: {
    href: '',
    target: '_blank'
  },
  // 是否使用ssr
  ssr: false
});
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

2. 在组件中动态设置标题和favicon：

export default {
  head: {
    title: 'Your Page Title', // 设置页面标题
    meta: {
      description: 'page specific description',
      keywords: 'page, specific, keywords'
    },
    // 设置favicon图标
    link: [
      { rel: 'icon', href: '/path/to/your/favicon.ico' }
    ]
  }
};

在上述代码中，head对象包含了你想要设置的各种头部信息。title属性用于设置页面标题，meta对象可以用来设置页面描述和关键词，link数组可以用来设置favicon图标。

请注意，href的值应该是favicon图标的绝对路径。如果你需要动态更改favicon（例如，根据页面内容或用户个人设置），你可以在组件的方法中修改this.head.link数组。

例如，你可以在某个方法中设置新的favicon：

methods: {
  changeFavicon(iconUrl) {
    this.head.link = this.head.link.filter(l => l.rel !== 'icon'); // 移除旧的favicon
    this.head.link.push({ rel: 'icon', href: iconUrl }); // 添加新的favicon
  }
}

然后，在适当的时候调用changeFavicon方法来更新favicon。