導(dǎo)航守衛(wèi)是用取消或者通過的方式來守衛(wèi)導(dǎo)航，導(dǎo)航守衛(wèi)有全局的 頁面級(jí)的組件級(jí)的
- 導(dǎo)航些帶的參數(shù)發(fā)生變化的時(shí)候?qū)Ш绞匦l(wèi)是不會(huì)進(jìn)行監(jiān)聽的如果需要觀察數(shù)據(jù)的變化铐料，需要觀察
$router的變化 或者 使用beforeRouterUpdata的組件守衛(wèi)
全局守衛(wèi)
- 使用router.beforeEach 注冊(cè)一個(gè)全局的路由守衛(wèi)
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
- 當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)乍丈，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中桥爽。
-
to:Route:即將要進(jìn)入的目標(biāo) 路由對(duì)象 -
from:Router:當(dāng)前導(dǎo)航正要離開的路由 -
nexFunction:一定要調(diào)用該方法來 resolve 這個(gè)鉤子纳击。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)续扔。
1 next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了焕数，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)纱昧。
2 next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕)堡赔，那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址识脆。
3next('/')或者next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航灼捂。你可以向next傳遞任意位置對(duì)象离例，且允許設(shè)置諸如replace: true、name: 'home'之類的選項(xiàng)以及任何用在router-link的toprop 或router.push中的選項(xiàng)悉稠。
全局后置鉤子 router.afterEach((to,from)=){})
- 全局后置鉤子就是在路由跳轉(zhuǎn)之后執(zhí)行的鉤子函數(shù)
獨(dú)享的守衛(wèi)
- 如下可以在路由的配置上面定義beforeEnter()
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
組件內(nèi)的守衛(wèi)
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
// 不宫蛆！能！獲取組件實(shí)例 `this`
// 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前的猛，組件實(shí)例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當(dāng)前路由改變洒扎，但是該組件被復(fù)用時(shí)調(diào)用
// 舉例來說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id衰絮，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候袍冷，
// 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用猫牡。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用胡诗。
// 可以訪問組件實(shí)例 `this`
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
// 可以訪問組件實(shí)例 `this`
}
}
- 在組件守衛(wèi)beforeEnter()的時(shí)候還不能獲取區(qū)組件的實(shí)例因?yàn)樾碌慕M件實(shí)例還沒被調(diào)用所以無法獲取this
但是了可以通過回調(diào)函數(shù)的vm實(shí)例來獲區(qū)而且beforeEnter是唯一個(gè)支持給nex傳遞回調(diào)的函數(shù)
beforeRouteEnter (to, from, next) {
next(vm => {
// 通過 `vm` 訪問組件實(shí)例
})
}
beforeRouteUpdate (to, from, next) {
// just use `this`
this.name = to.params.name
next()
}
路由meta字段
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
