由于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功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
