Vue Router 提供的导航守卫(Navigation Guards)是一种机制,主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的
全局前置守卫
你可以使用 router.beforeEach
注册一个全局前置守卫。当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中
在 Vue Router 4.x 版本中,next
变为了可选参数,我们可以直接通过 return
来 resolve 守卫.
const router = new VueRouter({ ... })
router.beforeEach((to, from) => {
// to: 即将要进入的目标路由对象
// from: 当前导航正要离开的路由
// 不再需要调用 next 方法
})
全局解析守卫
在 2.5.0+ 你可以用 router.beforeResolve
注册一个全局守卫。这和 router.beforeEach
类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
全局后置钩子
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
// ...
})
路由独享的守卫
你可以在路由配置上直接定义 beforeEnter
守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from) => {
// ...
}
}
]
})
组件内的守卫
你可以在路由组件内直接定义以下路由导航守卫:beforeRouteEnter
, beforeRouteUpdate
, beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate(to, from) {
// 在当前路由改变,但是该组件被复用时调用
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}