vue动态设置title标签

//1.router内设置
export default  [
     {
        path: '/',
        name: 'Home',
        component: r => require.ensure([], () => r(require('@/components/HelloWorld.vue')), 'Home'),
        alias: '/home/index',
        meta: { title: '首页',content: 'disable'},
     },
  ]
//2.main.js里面设置
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面meta */
  if(to.meta.content){
    let head = document.getElementsByTagName('head');
    let meta = document.createElement('meta');
    meta.content = to.meta.content;
    head[0].appendChild(meta)
  }
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next()
});

====== 更新 ========================
发现bug：刷新的时候，title设置丢失
解决方案：直接在路由配置 路由独享守卫，但是造成代码冗余，没有更好的方案

image.png

https://blog.csdn.net/yangdl6/article/details/95177145