vue如何實現(xiàn)路由切換改變title功能-創(chuàng)新互聯(lián)

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

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊和靠譜的建站技術(shù)，十載企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都千余家客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，高端網(wǎng)站設(shè)計，同時也為不同行業(yè)的客戶提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)建站。

由于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)航到目標(biāo)頁面時再更改title
router.afterEach((to, from) => {
 window.document.title = constants[to.name];
})
export default router;

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

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

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

網(wǎng)站名稱：vue如何實現(xiàn)路由切換改變title功能-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://bm7419.com/article12/gojgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、關(guān)鍵詞優(yōu)化、云服務(wù)器、商城網(wǎng)站、外貿(mào)建站、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)