vue實現路由切換改變title

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

那麼想實現路由切換title變換可以通過vue-router的導航守衛來實現，最簡單的的目錄結構可如下所示

├── 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(,,
component: reslove => require(['../components/test'], reslove)
},,}]
})//導航後置守衛，可以在確定導航到目標頁面時再更改title
router.aftereach((to, from) => )
export default router;

在這裡使用全域性後置守衛來對路由切換進行統一操作，全域性前置守衛在正常情況下也可以，但是如果出現導航一半終止掉，會出現頁面沒有被渲染為目標導航頁面，但是title以及被替換掉了，因此這裡使用全域性後置守衛是相對穩妥的，由上面可以看出實際的關鍵**也就三行，其他照舊

constants.js的內容如下：

export default

只是簡單將物件匯出

關於導航守衛不清楚的可以參考我的另外一篇部落格vue-router導航守衛

vue實現路由切換改變title

vue 修改路由名字 Vue 路由設定title

vue路由切換終止請求

Vue路由的切換動效

vue實現路由切換改變title

vue 修改路由名字 Vue 路由設定title

vue路由切換終止請求

Vue路由的切換動效

相關推薦