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设置丢失

解决方案：直接在路由配置 路由独享守卫，但是造成代码冗余，没有更好的方案啦~~~