vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁面title

更新時(shí)間：2019年11月05日 14:35:06 作者：web_xyk

今天小編就為大家分享一篇vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁面title，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

一、router文件夾下的index文件中給每個(gè)path添加meta:{}：

export default new Router({
 routes: [
 {
  path: '/',
  name: 'index',
  component: index,
  meta: {
   title: 'title1'
  }
 },
 {
  path: '/studentInfo',
  name: 'studentInfo',
  component: studentInfo,
  meta: {
   title: 'title2'
  }
 }   
 ]
})

二、js入口文件main.js中添加代碼：

router.beforeEach((to, from, next) => {
 /* 路由發(fā)生變化修改頁面title */
 if (to.meta.title) {
  document.title = to.meta.title
 }
 next()
})

效果：

以上這篇vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)更改頁面title就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中的異步組件函數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中的異步組件函數(shù)實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07
Vue.js之render函數(shù)使用詳解
這篇文章主要介紹了Vue.js之render函數(shù)使用詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)
在日常開發(fā)中，我們會遇到一些情況，限制日期的范圍的選擇，本文就詳細(xì)的介紹了ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，感興趣的可以了解一下
2022-04-04
VUE前端cookie簡單操作
這篇文章主要為大家詳細(xì)介紹了VUE前端cookie簡單操作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
Vue利用computed配合watch實(shí)現(xiàn)監(jiān)聽多個(gè)屬性的變化
這篇文章主要給大家介紹了在Vue中巧用computed配合watch實(shí)現(xiàn)監(jiān)聽多個(gè)屬性的變化的方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下
2023-10-10
vue構(gòu)建動態(tài)表單的方法示例
這篇文章主要介紹了vue構(gòu)建動態(tài)表單的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue界面發(fā)送表情的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue界面發(fā)送表情的實(shí)現(xiàn)代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲
這篇文章主要為大家詳細(xì)介紹了使用vue編寫一個(gè)點(diǎn)擊數(shù)字計(jì)時(shí)小游戲，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
Vue 封裝公告滾動的方法
文章介紹了如何在需求系統(tǒng)中創(chuàng)建一個(gè)位于頁面上方的公告展示組件,展示了如何在App.vue或其他頁面組件中使用這個(gè)公告組件,感興趣的朋友一起看看吧
2025-01-01
詳解用vue-cli來搭建vue項(xiàng)目和webpack
本篇文章主要介紹了詳解用vue-cli來搭建vue項(xiàng)目和webpack，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04