路由守卫 是什么 :
简单来说,导航守卫就是路由跳转前、中、后过程中的一些钩子函数,这个函数能让你操作一些其他的事儿,这就是导航守卫。
全局守卫
指路由实例上直接操作的钩子函数,他的特点是所有配置路由的组件都会触发
全局路由的钩子函数包括
beforeEach
在路由跳转前触发,参数包括to,from,next(参数会单独介绍)三个,这个钩子作用主要是用于登录验证
beforeResolve
这个钩子和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个,与beforeEach的区别参考官网。
afterEach
是在路由跳转完成后触发,参数包括to,from,它发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫)之前。
例如:
router.beforeEach((to, from, next) => {
// ...
})
独享守卫
指在单个路由配置的时候也可以设置的钩子函数
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
函数里面的参数有 to, from ,next
组件内守卫
指在组件内执行的钩子函数,类似于组件内的生命周期
<template>
</template>
export default{
//进入该组件之前被调用,组件实例还没有被创建,不能使用 this关键字
beforeRouteEnter (to, from, next) {
},
//离开组件之后调用,可以调用 this 关键字
beforeRouteUpdate (to, from, next) {
},
// 该组件被复用时调用,可以调用 this 关键字
beforeRouteLeave (to, from, next) {
}
}
to from next
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。