Vue-router 路由守卫
const router = new VueRouter({ ... })
前置路由守卫
router.beforeEach((to,from,next) => {
// to 下一跳路由路径地址
// from 上次路由地址对象
// next 回调钩子函数，next会解析出当前路径是否合法，是否需要路径判断重定向报错等 可以给next传参
// 执行的效果依赖传递的next 参数，如果全部钩子执行完毕，路由状态转为confirmed
// next 可接受参数形式：false 终端路由跳转，'/'(新的路径)，{ path: '/'，replace: true, to: '', name: ''}
// router.push 中的选项，或者传递报错Error，在router.onError 回调中捕获错误信息
// 确保调用 next 方法，保证 路由路径跳转 resolve
//
- fullPath: "/im-manage"
- hash: ""
- matched: [{…}]
- meta: {}
- name: "im-manage"
- params: {}
- path: "/im-manage"
- query: {}
// to from 对象的全部属性，两者一致！ 可以以此参数的值判断 next 传参从而改变路由展示的状态
})
全局路由守卫
router.beforeResolve 同时在所有组件内守卫 , 异步路由组件被解析之后 beforeResolve 被调用
全局后置钩子
router.afterEach((to, from) => {
// to 下一跳路由路径
// from 上一跳地址， 不提供 next也不需要next了，路由导航已经结束
})
路由独享守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 此处可以限制路由跳转来自哪里，是否是被允许的跳转等
// ...路由路径配置内定义路由地址独享的路由守卫，对单个地址配置路由判断 beforeEnter
}
}
]// 路由数组
})
组件内路由守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
// 组件模板
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
//
- fullPath: "/im-manage"
- hash: ""
- matched: [{…}]
- meta: {}
- name: "im-manage"
- params: {}
- path: "/im-manage"
- query: {}
// to from 对象的全部属性，两者一致！
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，组件复用的路由路径
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
路由的完整一般解析路程是 酱紫的：
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫 (2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter守卫中传给next的回调函数。