Vue中更新浏览器图标（Favicon）

在Vue中更新浏览器图标（Favicon），您可以定义一个方法来动态更改页面的标签中的href属性。

这里是一个名为changeFavicon的方法示例：

html中
<link rel="icon" href="./text.png" type="image/png" sizes="16x16">


<template>
  <!-- 页面内容 -->
</template>

<script>
export default {
  mounted() {
    // 假设你有一个新的favicon的URL
    const newFaviconUrl = 'path/to/your/new/favicon.ico';
    this.changeFavicon(newFaviconUrl);
  },
  methods: {
    changeFavicon(url) {
      const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';

      // 生成随机数或时间戳作为查询参数
      const timestamp = Date.now()
      const faviconUrl = url + '?v=' + timestamp
      link.href = faviconUrl;
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
}

在这个例子中，changeFavicon方法接收一个新的Favicon URL作为参数。

首先，它会尝试查询是否已经存在一个标签与Favicon相关。

如果存在，它会更新这个标签的href属性；
如果不存在，它会创建一个新的标签并设置相应的属性，然后将这个标签加入到中。

您可以在mounted钩子中调用这个方法，或者在用户执行某些操作时调用，以更新Favicon。