我们都知道vue的路由守卫有
全局路由守卫
单个独享路由守卫
组件路由守卫
在平时我们一般主要使用的都是全局的路由守卫,他里边有
- 全局前置守卫
router.beforeEach
- 全局解析守卫
router.beforeResolve
- 全局后置钩子
router.afterEach
全局前置守卫
首先我们注册一个全局前置守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
这里的 to, from, next, 所有守卫都是这三个参数
to
代表即将进入的路由
from
代表要离开的路由
next
钩子函数 ,当 next()时代表可以直接跳转
next(false)如果传入false代表不允许通过
当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象
next({path:“/”})可以在里边写要跳转的地址
一般应用在用户未能验证身份时重定向到 /login :
全局解析守卫
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
全局后置钩子
注意:后置钩子afterEach没有next参数
在路由跳转完成后触发,参数包括to,from,它发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫)之前。
路由独享守卫
这个守卫是写在路由里面的,只有当进入这个路由时才会调用的,这些守卫与全局前置守卫的方法参数是一样的。
const router = new VueRouter({
routes: [
{
path: '/info',
component: info,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
组件内部的路由守卫
可以在路由组件内直接定义以下路由导航守卫:
- 进组组件前的守卫 beforeRouteEnter
- 路由更新时的守卫 beforeRouteUpdate (2.2 新增)
- 离开组件时的守卫 beforeRouteLeave
这三个守卫是写在组件里,beforeRouteEnter守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。其他两个都可以用this
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 对应渲染该组件的路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
}
}