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
  }
})