手写mini-vueRouter

$\bullet$ 前言

使用vue开发，必然绕不过vueRouter，本节将一步步实现一个简易的history版本，它包括如下阉割版功能：视图出口router-view、导航组件link和导航钩子beforeEach

$\bullet$ 向vue注册挂载

通过Vue.use将插件挂载给Vue，Vue处理后将回调install并将vue实例回传。我们在install函数中拿到vue实例并通过mixin挂载beforeCreate，这将在组件初始化过程中经过配置合并后与组件自身的钩子函数合并并跑一遍执行

和vuex一样，我们应当确保全局只有一个路由实例，其初始化逻辑也应当只执行一次。对于其他的组件，都向上取即可。同时，我们还要提供访问别名即：this.$router

(this.$router等价于this._router._router即组件自身或从父组件继承的路由实例)

$\bullet$ 注册导航组件

到此为止，我们已经向vue的各个组件注入了路由实例，现在接着在install中调用vue.component方法向vue挂载导航组件

我们的导航组件就是一个a标签，它接收一个to属性，用以标识即将跳转的路由，且默认绑定一个click事件用以处理跳转路由逻辑

$\bullet$ 完成初始化逻辑

首先，在构造函数中，接收一下外部传递的路由列表

在init函数中注册hashChange事件，监听路由的变化，并提供push函数，该函数将在点击link组件时调用

$\bullet$ 完成路由跳转逻辑

router-link作为root的子组件，能够在执行beforeCreate时查找到路由实例并挂载到自身，同时在上一步我们也已经将history实例挂载到了路由实例上，故这里只需要进行路由组件匹配并跳转即可

$\bullet$ 注册视图出口

同样的，使用vue.component进行挂载

由于视图出口渲染的是当前正在导航的路由，因此我们需要在路由切换时将当前激活路由保存一份，然后在渲染视图出口时找到组件实例上的路由实例做挂载

现在还有一个比较棘手的问题，那就是当路由变化时，怎么通知到视图做更新呢?

我们知道，写在data中的数据是响应式的，当其某个key改变后会触发组件的更新，如果能把路由对象作为data的某个key绑定到组件，并在视图出口组件中去访问一次收集到视图组件的watcher，同时在路由改变时修改这个key。是不是就可以了呢？

（利用vue提供的 Vue.util.defineReactive 将key绑定到data变成响应式；当路由改变时修改这个 key 以触发更新）

如此一来，就只需要在视图出口组件中进行访问以达到依赖收集的目的即可

$\bullet$ beforeEach

作为阉割版，其实是很简单的。只需要增加一个配置项，并在路由改变前做判断，存在则调用，并把路由内部的某个方法作为next参数传递即可

$\star$ beforeCreate的bug

应该是从this.$parent上取

$\star$ 实例化时使用结构赋值取routes

$\star$ 视图出口中访问路由的代码需要默认为{}