vue如何實現(xiàn)路由切換改變title功能

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

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、網(wǎng)站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)興海免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

那么想實現(xiàn)路由切換title變換可以通過vue-router的導航守衛(wèi)來實現(xiàn)，最簡單的的目錄結(jié)構(gòu)可如下所示

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

下面主要就是vue-router的內(nèi)容了，其他頁面級別的內(nèi)容無關(guān)緊要

router/index.js內(nèi)容如下：

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

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

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

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

標題名稱：vue如何實現(xiàn)路由切換改變title功能
網(wǎng)址分享：http://m.jiaotiyi.com/article/ighiee.html