vue动态修改title

1、利用路由

router.js
//在对应路由json数据添加 meta属性 如meta:{title:"首页"}
{path: '/index',component: index,meta:{title:"首页"},}

 

main.js
//利用router方法beforeEach
router.beforeEach((to,from,next)=>{
  
  if(to.meta.title){
    document.title = to.meta.title
  }
  next()
})

 

2、利用directive方法

//新建vue指令 在对应的vue页面添加 <div v-title data-title="{$title}"> $title --> 标题内容
Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})