vue 动态更换网页icon和title

vue 动态更换网页icon和title

前言： 因为项目需要，需要通过判断用户来源，访问同一个网站展示不同的icon和标题

例：

• 比如来源 “a” 显示这样：

• 来源 “b”显示这样：

思路：

可以在路由钩子函数，获取用户信息，判断来源后获取icon并重新赋值href以及网页title的值。

代码：

// router/index.js
router.beforeEach(async (to, from, next) => {
  // dosomething...
  
  if (isFirstLogin) {
    const { status: userStatus, data: userData } = await xxx.xxx();

    if (userStatus === 200) {
      if (userData.sourceFrom === 2) {
        document.querySelector('link[rel="icon"]').setAttribute('href', 'https://abc.kanjian.com/favicons.png');
        document.title = '测试a';
      } else {
        document.querySelector('link[rel="icon"]').setAttribute('href', 'https://def.kanjian.com/favicons.png');
        document.title = '测试b';
      }
      // dosomething...
    } else {
      store.commit('logout');
    }

    isFirstLogin = false;
}

总结：

简单的知识点，时间长了不用也有可能忘记。希望自己能坚持学习，坚持记录，不断成长。