由于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'}  }]})//導航后置守衛，可以在確定導航到目標頁面時再更改titlerouter.afterEach((to, from) => { window.document.title = constants[to.name];})export default router;

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

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

只是簡單將對象導出

總結

以上所述是小編給大家介紹的vue實現路由切換改變title功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！