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