快捷導(dǎo)航

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

更新時(shí)間：2019年05月28日 09:32:36 作者：Garrettzxd

這篇文章主要介紹了vue實(shí)現(xiàn)路由切換改變title功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

由于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è)'
}

只是簡(jiǎn)單將對(duì)象導(dǎo)出

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)路由切換改變title功能,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: