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

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

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

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

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

├── 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'}
  }]
})
//導航后置守衛(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)妥的，由上面可以看出實際的關鍵代碼也就三行，其他照舊

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

只是簡單將對象導出

總結

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

您可能感興趣的文章:

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ā)的一個關鍵部分,盡管它一開始看起來令人生畏,但在你的武庫中擁有它是必須的,下面這篇文章主要給大家介紹了關于第一次在Vue中完整使用AJAX請求和axios.js的相關資料,需要的朋友可以參考下
2022-11-11
聊一聊Vue.js過渡效果
這篇文章主要和大家一起聊一聊Vue.js過渡效果、CSS 過渡效果、純 JavaScript過渡效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
vue項目中使用Hbuilder打包app 設置沉浸式狀態(tài)欄的方法
這篇文章主要介紹了vue項目使用Hbuilder打包app 設置沉浸式狀態(tài)欄的方法，本文通過實例代碼效果圖展示給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2018-10-10
vue2.0 如何在hash模式下實現(xiàn)微信分享
這篇文章主要介紹了vue2.0 如何在hash模式下實現(xiàn)微信分享,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
一篇文章帶你搞懂Vue虛擬Dom與diff算法
這篇文章主要給大家介紹了關于Vue虛擬Dom與diff算法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
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模式服務器端配置過程記錄
vue路由有hash和history兩種模式,這篇文章主要給大家介紹了關于vue-router history模式服務器端配置的相關資料,需要的朋友可以參考下
2021-06-06
Vue路由守衛(wèi)詳解
路由導航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導航過程中進行攔截和控制,其中,beforeEach 導航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧
2023-10-10