奇峰love
2021-04-16 16:42
采纳率: 100%
浏览 107

vue项目icon设置问题

背景:一个VUE项目,做了四个页面,每个页面只是在路由中做了配置,只是路径有差别,但是每个页面都放在不同场景之中,因此每个页面需要设置不同的icon

当前项目在public目录下index.html添加了
 <link rel="icon" href="<%= BASE_URL %>favicon.png">


请教大家是否有对应设置每个页面的方法

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • 已采纳

    再main.js里面写个路由守卫判断是哪个界面,然后动态修改

    (function() {
        var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = 'http://www.stackoverflow.com/favicon.ico';
        document.getElementsByTagName('head')[0].appendChild(link);
    })();    

    参考:https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically

    打赏 评论
  • 动态绑定,定义一个变量,变量设置值以后会自动显示的。

    打赏 评论
  • 酷爱码 2021-04-16 16:45

    不用,在html里设置就行了

    打赏 评论
  • bosaidongmomo 2021-04-16 16:47

    用js动态改也行啊..

    打赏 评论
  • bosaidongmomo 2021-04-16 16:47

    用js动态改也行啊..

    打赏 评论
  • 奇峰love 2021-04-16 16:55

    已经找到解决办法
    在mounted方法
                window.onload = function () {
                    var link = document.querySelector("link[rel*='icon']") || document.createElement("link");
                    link.type = "image/x-icon";
                    link.rel = "shortcut icon";
                    link.href = "图片网址";
                    document.getElementsByTagName("head")[0].appendChild(link);
                };
     

    打赏 评论
  • 有问必答小助手 2021-04-16 18:43

    您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    打赏 评论
  • 有问必答小助手 2021-04-19 17:09

    非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

    速戳参与调研>>>https://t.csdnimg.cn/Kf0y

    打赏 评论

相关推荐 更多相似问题