快捷導(dǎo)航

使用vue-router設(shè)置每個(gè)頁(yè)面的title方法

更新時(shí)間：2018年02月11日 09:26:08 作者：馬優(yōu)晨

下面小編就為大家分享一篇使用vue-router設(shè)置每個(gè)頁(yè)面的title方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(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è)入口'
  }
 },
 {   /* 修改昵稱 */
  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: '找不到頁(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ì)大家有所幫助。一起跟隨小編過來(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源碼組件上傳流程解析
這篇文章主要為大家介紹了ElementUI?Upload源碼組件上傳流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
vue+echart實(shí)現(xiàn)雙柱狀圖
這篇文章主要為大家詳細(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)，本文通過實(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（訪問令牌）和refresh token（刷新令牌）組合,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2024-03-03
Tree-Shaking?機(jī)制快速掌握
這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
使用window.open和vue router新開頁(yè)面
這篇文章主要介紹了使用window.open和vue router新開頁(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組件之間相互傳值的方式
這篇文章主要介紹了vue組件之間相互傳值的方式，對(duì)vue感興趣的同學(xué)，可以參考下
2021-05-05