Vue路由动态改变浏览器标题名称和图标样式

路由

const router = new Router({
    mode: 'hash',
    base: process.env.BASE_URL,
    router:[
        {
            path: '/',
            redirect: 'home'
        },
        {
            path: '/home',
            name: 'home',
            meta: {
                title: '名称',
                auth: true,
                icon: '图片名称', // 图片的格式为 .ico,路径在 public 下
            }
            component: () => {
                return import('需要引入的组件名称')
            }
        }
    ]
})

 

 

路由守卫

router.beforeEach(async (to,from,next) => {
    //路由发生变化修改页面title
    if(to.meta.title){
        document.title = `$(to.meta.title)`
    }
    //路由发生变化修改页面图标
    if(to.meta.icon) {
        document.getElementByTagName('link')[0].setAttribute('href',to.meta.icon)
    }
})