使用vue-router設(shè)置每個(gè)頁面的title方法
更新時(shí)間：2018年02月11日 09:26:08 作者：馬優(yōu)晨
下面小編就為大家分享一篇使用vue-router設(shè)置每個(gè)頁面的title方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
基本環(huán)境配置： webpack + vue2.0 + vue-router +nodeJS
進(jìn)入 router 文件夾底下的index.js文件
首先引入：
import Vue from 'vue' import Router from 'vue-router'
然后在路由里面配置每個(gè)路由的地址：
routes: [
{ /* （首頁）默認(rèn)路由地址 */
path: '/',
name: 'Entrance',
component: Entrance,
meta: {
title: '首頁入口'
}
},
{ /* 修改昵稱 */
path: '/modifyName/:nickName',
name: 'modifyName',
component: modifyName,
meta: {
title: '修改昵稱'
}
},
{ /* 商品詳情 */
path: '/goodsDetail',
name: 'goodsDetail',
component: goodsDetail,
meta: {
title: '商品詳情'
}
},
{ /* Not Found 路由，必須是最后一個(gè)路由 */
path: '*',
component: NotFound,
meta: {
title: '找不到頁面'
}
}
]
在每一個(gè)meta里面設(shè)置頁面的title名字，最后在遍歷
router.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
這樣就為每一個(gè)VUE 的頁面添加了title
以上這篇使用vue-router設(shè)置每個(gè)頁面的title方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nuxt引入vue-persistedstate以及踩坑記錄
這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中addEventListener()?監(jiān)聽事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽事件案例講解，包括語法講解和事件冒泡或事件捕獲的相關(guān)知識(shí)，本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12
在 Vue3 中,setup 函數(shù)是一個(gè)新引入的概念,它代替了之前版本中的 data、computed、methods 等選項(xiàng),用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理,感興趣的朋友一起看看吧2024-02-02
解決vue項(xiàng)目本地啟動(dòng)時(shí)無法攜帶cookie的問題
這篇文章主要介紹了解決vue項(xiàng)目本地啟動(dòng)時(shí)無法攜帶cookie,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
詳解vue-cli 構(gòu)建項(xiàng)目 vue-cli請(qǐng)求后臺(tái)接口 vue-cli使用axios、sass、swiper
本文通過實(shí)例代碼給大家詳細(xì)介紹了vue-cli 構(gòu)建項(xiàng)目 vue-cli請(qǐng)求后臺(tái)接口 vue-cli使用axios、sass、swiper的相關(guān)知識(shí),需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue.js+element 默認(rèn)提示中英文實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3環(huán)境安裝以及項(xiàng)目搭建全過程
Vue工程化項(xiàng)目環(huán)境配置還是比較麻煩的,下面這篇文章主要給大家介紹了關(guān)于Vue3環(huán)境安裝以及項(xiàng)目搭建的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
使用Element-UI的NavMenu如何隱藏自帶的小箭頭
這篇文章主要介紹了使用Element-UI的NavMenu如何隱藏自帶的小箭頭問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue阻止頁面回退的實(shí)現(xiàn)方法(瀏覽器適用)
這篇文章主要介紹了vue阻止頁面回退的實(shí)現(xiàn)方法(瀏覽器適用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
本文給大家分享了VUE制作點(diǎn)擊按鈕出現(xiàn)水波紋效果的組件過程，對(duì)此有需求的朋友可以跟著學(xué)習(xí)下。2018-04-04