vue2 单文件组件加入浏览器的title和ico的方法

加入title：

代码：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

// 在 router/index.js 的导出前添加
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
    
  }
  next();
});

加入ico代码：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  mounted() {
    this.changeFavicon('/new-favicon.ico')
  },
  
  methods: {
    changeFavicon(iconUrl) {
      // 找到现有的 favicon 链接
      let link = document.querySelector("link[rel*='icon']") || document.createElement('link')
      
      // 设置属性
      link.type = 'image/x-icon'
      link.rel = 'shortcut icon'
      link.href = iconUrl
      
      // 添加到 head
      document.getElementsByTagName('head')[0].appendChild(link)
    }
  },
  
  // 离开时恢复原图标
  beforeDestroy() {
    this.changeFavicon('/original-favicon.ico')
  }
}
</script>

解释：