使用vue-router設(shè)置每個(gè)頁(yè)面的title方法
更新時(shí)間：2018年02月11日 09:26:08 作者：馬優(yōu)晨
下面小編就為大家分享一篇使用vue-router設(shè)置每個(gè)頁(yè)面的title方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
基本環(huán)境配置： webpack + vue2.0 + vue-router +nodeJS
進(jìn)入 router 文件夾底下的index.js文件
首先引入：
import Vue from 'vue' import Router from 'vue-router'
然后在路由里面配置每個(gè)路由的地址：
routes: [
{ /* （首頁(yè)）默認(rèn)路由地址 */
path: '/',
name: 'Entrance',
component: Entrance,
meta: {
title: '首頁(yè)入口'
}
},
{ /* 修改昵稱(chēng) */
path: '/modifyName/:nickName',
name: 'modifyName',
component: modifyName,
meta: {
title: '修改昵稱(chēng)'
}
},
{ /* 商品詳情 */
path: '/goodsDetail',
name: 'goodsDetail',
component: goodsDetail,
meta: {
title: '商品詳情'
}
},
{ /* Not Found 路由，必須是最后一個(gè)路由 */
path: '*',
component: NotFound,
meta: {
title: '找不到頁(yè)面'
}
}
]
在每一個(gè)meta里面設(shè)置頁(yè)面的title名字，最后在遍歷
router.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁(yè)面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
這樣就為每一個(gè)VUE 的頁(yè)面添加了title
以上這篇使用vue-router設(shè)置每個(gè)頁(yè)面的title方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue props對(duì)象validator自定義函數(shù)實(shí)例
今天小編就為大家分享一篇vue props對(duì)象validator自定義函數(shù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue表單驗(yàn)證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實(shí)現(xiàn)表單元素校驗(yàn)時(shí)，出現(xiàn)下拉框內(nèi)容選中后校驗(yàn)不消失的異常校驗(yàn)情形，這篇文章主要介紹了Vue表單驗(yàn)證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了ElementUI?Upload源碼組件上傳流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue+echart實(shí)現(xiàn)雙柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue3動(dòng)態(tài)修改打包后的請(qǐng)求路徑的操作代碼
這篇文章主要介紹了vue3動(dòng)態(tài)修改打包后的請(qǐng)求路徑,需要我們創(chuàng)建一個(gè)靜態(tài)資源里的外部文件來(lái)實(shí)現(xiàn)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
Vue實(shí)現(xiàn)雙token無(wú)感刷新的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)雙token無(wú)感刷新,雙token機(jī)制,尤其是指在OAuth 2.0授權(quán)協(xié)議中廣泛使用的access token（訪問(wèn)令牌）和refresh token（刷新令牌）組合,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
使用window.open和vue router新開(kāi)頁(yè)面
這篇文章主要介紹了使用window.open和vue router新開(kāi)頁(yè)面方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在Vue中使用scoped屬性實(shí)現(xiàn)樣式隔離的原因解析
scoped是Vue的一個(gè)特殊屬性,可以應(yīng)用于<style>標(biāo)簽中的樣式,這篇文章給大家介紹在Vue中,使用scoped屬性為什么可以實(shí)現(xiàn)樣式隔離,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue組件之間相互傳值的方式，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05