vue如何實現路由切換改變title功能

這篇文章給大家分享的是有關vue如何實現路由切換改變title功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

由于vue項目通常是單頁應用，因此在入口文件index.html只有一個title，單頁所展示的若干頁面只是隨著路由的切換而在同一個index.html上不同的渲染而已，因此此時的title屬性是不會隨著頁面的切換而變更的

那么想實現路由切換title變換可以通過vue-router的導航守衛來實現，最簡單的的目錄結構可如下所示

├── index.html
├── main.js
├── api
│  └── ... # 抽取出API請求
├── common
│  └── constants.js  //title值
├── components
│  ├── HelloWorld.vue
│  ├── Test.vue
│  ├── User.vue
│  └── ...
├── router
│  └── index.js

下面主要就是vue-router的內容了，其他頁面級別的內容無關緊要

router/index.js內容如下：

import Vue from 'vue'
import Router from 'vue-router'
import constants from '../common/constants'
Vue.use(Router)
const router = new Router({
 routes: [{
    path: '/',
    name: 'HelloWorld',
    component: reslove => require(['../components/HelloWorld'], reslove)
  },{
   path: '/hello',
   name: 'hello',
   props: {name: 'garrett'},
   component: reslove => require(['../components/Test'], reslove)
  },{
   path: '/user',
   name: 'user',
   component: reslove => require(['../components/User'], reslove)
  },{
   path: '*',
   redirect: {name: 'hello'}
  }]
})
//導航后置守衛，可以在確定導航到目標頁面時再更改title
router.afterEach((to, from) => {
 window.document.title = constants[to.name];
})
export default router;

在這里使用全局后置守衛來對路由切換進行統一操作，全局前置守衛在正常情況下也可以，但是如果出現導航一半終止掉，會出現頁面沒有被渲染為目標導航頁面，但是title以及被替換掉了，因此這里使用全局后置守衛是相對穩妥的，由上面可以看出實際的關鍵代碼也就三行，其他照舊

constants.js的內容如下：
export default{
 HelloWorld: '首頁',
 hello: '歡迎頁',
 user: '用戶頁'
}

感謝各位的閱讀！關于“vue如何實現路由切換改變title功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！