路由守卫分为三种
1.全局路由守卫
- beforeEach 路由进入之前
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
- afterEach 路由进入之后
钩子不会接受next函数也不会改变导航本身。它不管你去哪里,也不会拦你
当然你也可以使用to和from对象。
router.afterEach((to, from) => {
// ...
})
2.独享守卫
beforeEnter:这个守卫是写在路由里面的,只有进入这个路由时才会调用的,这些守卫与全局前置守卫的方法参数是一样的
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
3.组件内守卫
beforeRouteEnter:路由进去
beforeRouteUpdate:路由更新
beforeRouteLeave:路由离开