VueRouter导航守卫 vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航，简单来说导航守卫就是路由跳转过程中的一些钩子函数，路由跳转是一个大的过程，这个大的过程分为跳转前中后
VueRouter导航守卫
参数
-
to: Route: 即将要进入的目标路由对象，即组件内的this.$route。
-
from: Route: 当前导航正要离开的路由对象。
-
next: Function: 一定要调用该方法来resolve这个钩子，需要确保next函数在任何给定的导航守卫中都被严格调用一次，其可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错，此函数执行效果依赖next方法的调用参数。
-
next(): 进行管道中的下一个钩子，如果全部钩子执行完了，则导航的状态就是确认confirmed的。
-
next(false): 中断当前的导航，如果浏览器的URL改变了，例如用户手动或者浏览器后退按钮，那么URL地址会重置到from路由对应的地址。
-
next("/")或者next({ path: "/" }): 跳转到一个不同的地址，当前的导航被中断，然后进行一个新的导航，可以向next传递任位置对象，且允许设置诸如replace: true、name: "home"之类的选项以及任何用在router-link的to prop或router.push中的选项。
-
next((vm)=>{}): beforeRouteEnter是支持给next传递回调的唯一守卫，回调内接收的参数为当前组件的vm，对于beforeRouteUpdate和beforeRouteLeave来说，this已经可用了，所以无需也不支持传递回调。
-
next(error) (2.4.0+): 如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。
全局前置守卫
const router = new VueRouter({ /*...*/ })
router.beforeEach((to,from,next) => {
// ... // if (...) next(); else next("/login");
})
全局解析守卫
const router = new VueRouter({ /*...*/ })
router.beforeResolve((to,next) => {
// ...
})
全局后置钩子
const router = new VueRouter({ /*...*/ })
router.afterEach((to,from) => {
// ...
})
const router = new VueRouter({
routes: [{
path: "/example",component: Example,beforeEnter: (to,next) => {
// ...
}
}]
})
组件前置守卫
const Example = {
template: `...`,beforeRouteEnter: function(to,next) {
// ...
}
}
组件更新守卫
const Example = {
template: `...`,beforeRouteUpdate: function(to,next) {
// ...
}
}
组件离开守卫
const Example = {
template: `...`,beforeRouteLeave: function(to,next) {
// ...
}
}
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave守卫。
- 调用全局的
beforeEach守卫。
- 在重用的组件里调用
beforeRouteUpdate守卫2.2+。
- 在路由配置里调用
beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。
- 调用全局的
beforeResolve守卫2.5+。
- 导航被确认。
- 调用全局的
afterEach钩子。
- 组件生命周期
beforeCreate、created、beforeMount、mounted。
- 触发
DOM更新。
- 调用
beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。
https://github.com/WindrunnerMax/EveryDay
https://zhuanlan.zhihu.com/p/54112006
https://juejin.im/post/6844903652272898056
https://segmentfault.com/a/1190000016571559
http://static.kancloud.cn/cyyspring/vuejs/941801
https://www.cnblogs.com/kzxiaotan/p/11676872.html
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
服务热线 19970861797
