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