在這里我們介紹3種方法

1.通過自定義指令去修改（單個修改比較好）

1.在main.js 頁面里添加自定義指令// Vue.directive('title', {//單個修改標題inserted: function (el, binding) {document.title = el.dataset.title} }) 2.在需要修改的頁面里添加v-title 指令 <div v-title data-title="我是新的標題"></div>.復制代碼

2.使用插件vue-wechat-title

1.安裝插件 npm vue-wechat-title --save 2.在main.js里面引入插件 import VueWechatTitle from 'vue-wechat-title'//動態修改title Vue.use(VueWechatTitle) 3.在路由里面 添加titleroutes: [{path: '/login',component: Login,meta: {title: '登錄'}}, {path: '/home',component: Home,meta: {title: '首頁'}},]4.在app.vue 中添加 指令 v-wechat-title <router-view v-wechat-title='$route.meta.title' /> 復制代碼

3.通過router.beforeEach導航守衛來修改

1.在router的index里寫自己的路徑和title const router = new Router({routes: [{path: '/login',component: Login,meta: {title: '登錄'}}, {path: '/home',component: Home,meta: {title: '首頁'}}, ]}) 2.使用router.beforeEach對路由進行遍歷，設置title router.beforeEach((to, from, next) => {//beforeEach是router的鉤子函數，在進入路由前執行if (to.meta.title) {//判斷是否有標題console.log(to.meta.title)document.title = to.meta.title}next() }) 復制代碼

轉載于:https://juejin.im/post/5d355c3f6fb9a07eb15d9383

總結

以上是生活随笔為你收集整理的vue 动态设置页面title的全部內容，希望文章能夠幫你解決所遇到的問題。

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