vue 路由传参方式_vue-router 基础：几种路由守卫方式

前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。(里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读)

守卫这个思想，最初我是在 angular 看到的，然而 vue 里也有对应的概念，毕竟这些前端框架的设计理念有太多的相似之处。但在整个程序设计语言中，还是觉得用 java 里的拦截器 interceptor 描述最为恰当。

下面来看下 vue 中有关路由的一些“守卫”方式。

全局前置守卫 beforeEach

beforeEach 是个全局的方法。接受 to、from、next 三个参数，前两者分别是路由对象，代表路由将到哪里去，和路由从哪里来。

next 是整个方法最后 resolve 的回调钩子。如果始终没有在这方法中执行过 next，那么永远不会进入到后续路由中。

我们能在这个守卫中做什么？看这个例子：

可以对目标 to 路由做个用户已授权的判断，如果用户达到条件则 next，否则你可以抛出个异常或者其他有用的信息。以免对后续组件的取值造成影响。

全局后置路由 afterEach

这也是个全局方法。当路由跳转结束好后，执行的路由方法。与 beforeEach 不同，它不具备 next 参数，也就不具备“守卫”功能。

正因为没有 next 功能，你不要尝试做一些异步操作，以免执行顺序错乱。

我们可以统一在此处做些状态信息的处理，以便 component 能更好的处理。

全局解析守卫 beforeResolve

在 afterEach 之前被调用，当路由组件都被解析后则触发。

路由独享的守卫 beforeEnter

上面这两个都是全局范围的，如果只想让某个特定路由执行特殊“任务”，可以在路由定义上使用 beforeEnter，它和 beforeEach 一样具备守卫功能，即可以调用 next：

组件内的守卫 beforeRouteXXX

为了更细粒度的控制组件的交互，vue-router 也提供了 组件内部 的路由方法，他们和 data、methods 等组件属性一样使用。

使用示例如下：

特别注意上面的 beforeRouterUpdate 只作用于动态路由；并且 beforeRouteEnter 是拿不到当前组件的 this 对象的。

路由执行顺序

如果说一堆顺序，记肯定记不住的，我画了一个简单的图供参考：

分两块：不同路由切换(蓝色框)、动态路由切换(红色框)

路由执行顺序

总结

列举了几个路由中的守卫方法，对他们的执行顺序做了说明。希望各位能在今后的业务工作中能更加好的控制页面的跳转。

关于我

一位“前端工程师”，乐于实践，并分享前端开发经验。

如果有问题或者想法，欢迎各位评论留言，愿大家共同进步。

关注【前端雨爸】，查阅更多前端技术心得。