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

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

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

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

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

下面主要就是vue-router的內(nèi)容了，其他頁(yè)面級(jí)別的內(nèi)容無(wú)關(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'}
  }]
})
//導(dǎo)航后置守衛(wèi)，可以在確定導(dǎo)航到目標(biāo)頁(yè)面時(shí)再更改title
router.afterEach((to, from) => {
 window.document.title = constants[to.name];
})
export default router;

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

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

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