前言：在項目中，我們有時候需要修改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项目的标题_如何动态修改Vue项目中的页面title的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。