如何動態修改Vue項目中的頁面title

前言：在項目中，我們有時候需要修改Vue項目中的頁面title。

          方法有兩種，①如果需要動態設置頁面的title，可以直接使用document.title；②可以使用router的beforeEach去統一設置，這種方法使用每個頁面都是固定的標題，在進入路由就賦值標題，進入路由後就不修改了。

一、方法一使用document.title動態修改頁面標題

       (1)在index.js中設置document.title

//設置遊覽器標題
Vue.directive({
    inserted: function(el,binding){
        document.title = el.dataset.title
    }
})

      (2)在某個頁面最大的div上設置v-title data-title

    加上以下代碼：

v-title data-title="人生計劃書"

   效果如下圖所示：

     其實，還有更簡單的方法，在頁面中直接賦值給document.title，這樣還可以在頁面中隨時動態切換。

二、方法二使用beforeEach去統一設置

       利用vue-router可以開發單頁面應用，但實際中每個頁面級別的路由都有自己的title名，這就要利用router的beforeEach去統一設置。

const router = new Router({
    routes:[
        {
           path:'/',
           name:'index',
           meta:{title:"我是首頁"},
           component: Index
    
    },
    {
           path:'/',
           name:'index',
           meta:{title:"我是列表頁"},
           component: List
    }
   ]
})
router.beforeEach((to,from,next)=>{//beforeEach是router的鉤子函數，在進入路由前執行
    if(to.meta.title){//判斷是否有標題
        document.title = to.meta.title
    }
    next()  //執行進入路由，如果不寫就不會進入目標頁
})

export default router

      這種方法，beforeEach是router的鉤子函數，在進入路由前執行的，所以，在進入頁面前就對標題進行賦值了。所以，如果進入頁面之後，需要修改標題，還是需要用document.title來修改的。

參考博客：

              動態修改vue項目中的頁面title  https://www.jianshu.com/p/36b47d63cdb1

             vue-router之頁面標題的動態設置  https://www.jianshu.com/p/7c3f52f640ab

            動態設置頁面的title  https://www.cnblogs.com/linxue/p/9647739.html