vue動態(tài)設置頁面title的方法實例

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

//1.安裝插件
npm vue-wechat-title --save
//2.在main.js里面引入插件
import VueWechatTitle from 'vue-wechat-title'//動態(tài)修改title
Vue.use(VueWechatTitle)
//3.在路由里面 添加title
   routes: [{
   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' />

//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的鉤子函數(shù)，在進入路由前執(zhí)行
 if (to.meta.title) {
  //判斷是否有標題
  console.log(to.meta.title)
  document.title = to.meta.title
 } else {
  document.title = '默認title'
 }
 next()
})