vue實現(xiàn)路由切換改變title功能
由于vue項目通常是單頁應(yīng)用，因此在入口文件index.html只有一個title，單頁所展示的若干頁面只是隨著路由的切換而在同一個index.html上不同的渲染而已，因此此時的title屬性是不會隨著頁面的切換而變更的
那么想實現(xiàn)路由切換title變換可以通過vue-router的導(dǎo)航守衛(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'}
}]
})
//導(dǎo)航后置守衛(wèi)，可以在確定導(dǎo)航到目標頁面時再更改title
router.afterEach((to, from) => {
window.document.title = constants[to.name];
})
export default router;
在這里使用全局后置守衛(wèi)來對路由切換進行統(tǒng)一操作，全局前置守衛(wèi)在正常情況下也可以，但是如果出現(xiàn)導(dǎo)航一半終止掉，會出現(xiàn)頁面沒有被渲染為目標導(dǎo)航頁面，但是title以及被替換掉了，因此這里使用全局后置守衛(wèi)是相對穩(wěn)妥的，由上面可以看出實際的關(guān)鍵代碼也就三行，其他照舊
constants.js的內(nèi)容如下：
export default{
HelloWorld: '首頁',
hello: '歡迎頁',
user: '用戶頁'
}
只是簡單將對象導(dǎo)出
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)路由切換改變title功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development
這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
第一次在Vue中完整使用AJAX請求和axios.js的實戰(zhàn)記錄
AJAX是現(xiàn)代Web開發(fā)的一個關(guān)鍵部分,盡管它一開始看起來令人生畏,但在你的武庫中擁有它是必須的,下面這篇文章主要給大家介紹了關(guān)于第一次在Vue中完整使用AJAX請求和axios.js的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要和大家一起聊一聊Vue.js過渡效果、CSS 過渡效果、純 JavaScript過渡效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
vue項目中使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法
這篇文章主要介紹了vue項目 使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法，本文通過實例代碼效果圖展示給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue2.0 如何在hash模式下實現(xiàn)微信分享,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要給大家介紹了關(guān)于Vue虛擬Dom與diff算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
詳解.vue文件中監(jiān)聽input輸入事件（oninput）
本篇文章主要介紹了詳解.vue文件中監(jiān)聽input輸入事件（oninput），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
electron?dialog.showMessageBox的使用案例
Electron?Dialog?模塊提供了api來展示原生的系統(tǒng)對話框,本文主要介紹了electron?dialog.showMessageBox的使用案例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
vue-router history模式服務(wù)器端配置過程記錄
vue路由有hash和history兩種模式,這篇文章主要給大家介紹了關(guān)于vue-router history模式服務(wù)器端配置的相關(guān)資料,需要的朋友可以參考下2021-06-06
路由導(dǎo)航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導(dǎo)航過程中進行攔截和控制,其中,beforeEach 導(dǎo)航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧2023-10-10