vue项目icon设置问题

Question

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

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


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

Answer 1

再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