在這里我們介紹3種方法

1.通過(guò)自定義指令去修改（單個(gè)修改比較好）

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

2.使用插件vue-wechat-title

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

3.通過(guò)router.beforeEach導(dǎo)航守衛(wèi)來(lái)修改

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

轉(zhuǎn)載于:https://juejin.im/post/5d355c3f6fb9a07eb15d9383

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。