vue 动态设置系统在浏览器中的标题title和图标favicon

在Vue中，可以通过修改document.title来动态设置网页标题（title），而修改favicon则需要动态创建一个link标签，并指向新的favicon图标文件。

以下是实现这两个功能的示例代码：

// 在Vue组件中
export default {
  name: 'YourComponent',
  mounted() {
    // 设置初始标题和favicon
    this.setTitleAndFavicon('初始标题', '/path/to/initial/favicon.ico');
  },
  methods: {
    setTitleAndFavicon(title, faviconPath) {
      // 设置标题
      document.title = title;
 
      // 动态设置favicon
      const link = document.querySelector("link[rel~='icon']");
      if (!link) {
        const newLink = document.createElement('link');
        newLink.rel = 'icon';
        newLink.href = faviconPath;
        document.getElementsByTagName('head')[0].appendChild(newLink);
      } else {
        link.href = faviconPath;
      }
    }
  }
}

在需要改变标题和favicon的时候，只需调用setTitleAndFavicon方法，并传入新的标题和图标路径即可。例如，在某个事件或生命周期钩子中：

this.setTitleAndFavicon('新标题', '/path/to/new/favicon.ico');

确保图标文件的路径是正确的，并且有对应的权限让浏览器能够访问。