vue 實(shí)現(xiàn)路由跳轉(zhuǎn)時更改頁面title
更新時間：2019年11月05日 14:35:06 作者：web_xyk
今天小編就為大家分享一篇vue 實(shí)現(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 實(shí)現(xiàn)路由跳轉(zhuǎn)時更改頁面title就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue引入并使用Element組件庫的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
vue3+element-plus動態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動態(tài)路由菜單示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之列表渲染,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
vue3響應(yīng)式對象的api超全實(shí)例詳解
可以把數(shù)據(jù)變成響應(yīng)式api的方法叫做響應(yīng)式api,下面這篇文章主要給大家介紹了關(guān)于vue3響應(yīng)式對象api的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
前端開發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個vue柵格拖動布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue.js 表單校驗(yàn)插件的相關(guān)資料,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了使用vue實(shí)現(xiàn)計時器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在Uniapp中使用web-view組件來加載H5頁面時,對于后退鍵的處理是一個常見需求,下面這篇文章主要給大家介紹了關(guān)于Uniapp中WebView的使用與后退鍵處理的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue antd的from表單中驗(yàn)證rules中type的坑記錄
這篇文章主要介紹了vue antd的from表單中驗(yàn)證rules中type的坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04