Vue?router?路由守衛(wèi)詳解
一、全局前置beforeEach
當(dāng) Local Storage 里面存儲(chǔ)的 name 是 zhangsan 的時(shí)候, 點(diǎn)擊消息才顯示消息內(nèi)容
1. 全局前置beforeEach
給router添加一個(gè)路由守衛(wèi) beforeEach
語(yǔ)法 :
router.beforeEach((to, from, next)=>{})
作用 : 初始化的時(shí)候 和 在每一次路由切換之前調(diào)用beforeEach里面的函數(shù)
參數(shù) :
1.to : 目標(biāo)路由
2.from : 跳轉(zhuǎn)前的路由
3.next : 放行
2. 實(shí)現(xiàn)
二、需求二
如果有很多個(gè)路徑都需要做出判斷以后才跳轉(zhuǎn), 就需要寫很多判斷的代碼, 判斷結(jié)構(gòu)就會(huì)很復(fù)雜
這時(shí)需要判斷的路由里面就可以放一個(gè)meta標(biāo)簽
meta標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù) (元數(shù)據(jù)指用來(lái)描述數(shù)據(jù)的數(shù)據(jù))
這時(shí)就可以使用meta里面的標(biāo)記字段進(jìn)行判斷
三、全局后置守衛(wèi) afterEach
afterEach 和 beforeEach 使用方法基本一致.
區(qū)別就是afterEach沒(méi)有next這個(gè)參數(shù)
1. 修改title為自己的title
給每個(gè)路由指定自己的title名稱
const router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
meta: {
title: "首頁(yè)"
},
children: [
{
name: "xiaoxi",
path: 'message',
component: Message,
meta: {
title: "消息"
},
children: [
{
name: 'xiangqing',
path: 'detail',
component: Detail,
meta: {
isAuth: true,
title: "消息詳情"
}
}
]
}
]
},
{
path: '/about',
component: About,
meta: {
title: "關(guān)于"
}
}
]
})
在 beforEach里面修改title名
router.afterEach((to, from) => {
document.title = to.meta.title || "測(cè)試"
})
四、組件內(nèi)守衛(wèi)
1. beforeRouteEnter
通過(guò)路由規(guī)則, 進(jìn)入該組件時(shí)被調(diào)用
2. beforeRouteLeave
通過(guò)路由規(guī)則, 離開該組件時(shí)被調(diào)用
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
本文主要介紹了Vue打包后頁(yè)面出現(xiàn)空白解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了在?Vue?中使用?iframe?嵌套頁(yè)面,使用?iframe?技術(shù)可以實(shí)現(xiàn)多個(gè)頁(yè)面之間的數(shù)據(jù)傳遞和交互，提高了網(wǎng)站的整體性能和用戶體驗(yàn)，需要的朋友可以參考下2023-05-05
vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-09-09
基于vue+echarts數(shù)據(jù)可視化大屏展示的實(shí)現(xiàn)
這篇文章主要介紹了基于vue+echarts數(shù)據(jù)可視化大屏展示的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
apache和nginx下vue頁(yè)面刷新404的解決方案
這篇文章主要介紹了apache和nginx下vue頁(yè)面刷新404的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了.html頁(yè)面引入vue并使用公共組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決
本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項(xiàng)的相關(guān)資料,vue中$root是用來(lái)訪問(wèn)根組件的,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03