vueRouter源码解读--流程解析

$\bullet$ 前言

学完了vue-router的细节，现在做一个整体总结

$\bullet$ 几个问题

$\ast$ 1-它是怎样把路由组件和路由方法注入到vue的？

$\ast$ 2-hash模式和history模式都是基于什么实现的？

$\ast$ 3-路由参数是怎么处理的？

$\ast$ 4-导航守卫是怎么实现的？

$\bullet$ 它是怎样把路由组件和路由方法注入到vue的

作为vue插件，和vuex一样通过vue.use进行注册。因此我们核心看install方法。可以看到，它通过mixin方法向每一个组件注入了beforeCreate钩子，并在钩子函数内将根组件传递的路由实例挂载到当前组件实例

接着调用Vue.component注册两个全局组件

$\bullet$ hash和history有什么区别

我们在实例化路由时除了定义路由列表外，还要指定mode属性以标记当前使用的路由模式，因此我们看constructor初始化过程

当加载具体的某一个组件时执行beforeCreate钩子函数进行router查找并在找到后执行init初始化

可以看到这里拿到我们指定的路由模式做了一次路由改变监听，如指定hash，则实际上是hashchange

而history模式则实际上是popstate

$\bullet$ 路由参数是怎么处理的

示例如下

我们先看下router-link组件的大致实现：可以看到这是一个使用render函数实现的组件，该组件被内置监听了click函数，当点击时将执行实例的push方法，并将to的内容作为参数一传递

接着去路由列表中匹配对应的路由组件并与当前参数做一次合并，接着将当前路由标记为激活

那么我们在组件中访问this.$router.query时就能访问到了

（this.$route即访问的路由实例的_route，而_route由指向当前激活）

$\bullet$ 导航守卫是怎么实现的

拿beforeEach来说，当我们注册该函数时会调用registerHook向数组中添加回调函数

当进行路由跳转处理时，即router.push的执行逻辑过程中，将执行confirmTransition去跑一遍回调队列。可以看到该队列的执行在onComplete之前，故能达到路由拦截的效果