vue-router源码实现(一)

一、入口文件分析。

vue-router的使用页面

1. 说明VueRouter是一个插件，所以实现过程中需要使用install方法来实现一个插件。
2. 说明VueRouter是一个类，所以实现过程中需要创建一个类，然后构造函数需要接收传过来的参数。

二， 实现过程剖析。

使用this.$options 来接收。其他地方暂时忽略，在实现router-view时需要用到。

2. 实现插件。

以下是实现的代码截图。

实现router-link

Vue.js 的插件有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

我们定义一个变量来接收Vue的构造器，为保持一致，我们命名为Vue。这样我们就可以使用Vue的一些方法了。例如Vue.mixin ,Vue.component等等。

1. 我们使用Vue的mixin（这里有mixins的相关介绍)方法,  这样可以在组件的钩子函数beforeCreate生命周期在Vue的原型上挂载router，这也是为什么在vue中到处都可以使用this.$router的原因。router是从this.$options取的， vue的执行是组件的一个个渲染的过程。并不是每一个组件都可以从this.$options 拿到router ，只有在跟组件中在可以拿到 所以加判断 拿到了router对象，才将其挂载在原型上。

2. 接下来我们实现router-link组件. 组件的使用我们按照正常的组件的写法，因为组件中因为webpack编译的原因（默认情况下打包的 vue 是 runtime 版本，借助loader就完成了编译工作，并且runtime识别的是render 函数，因此没有 compiler模块，也就不能解析template），所以无法使用template，所以我们使用render函数来渲染。router-link 实际上是a标签，然后加上属性，跳转就可以实现了。所以我们使用props的to属性，来接收外部传过来的值，我们用render方法的h这个参数来渲染。this.slots.default可以拿到子组件的内容。

实现router-view

接下来实现router-view.

1.使用Vue.component这个方法，和router-link差不多，都是在render函数里面去用h方法来渲染。router-view的实现，只需拿到当前路由的路由表的component在渲染出去就行了。所以我们先拿到当前的路由。

2. 监听hashchange方法，当路由改变切换时获取hash值，然后用current这个值来接收。

2. 我们在VueRouter的类的构造函数中，使用Vue.util.defineReactive这个方法，让数据变成响应式的，这样我们拿到的this.current就是最新的

4. 经过以上三步的操作，我们在install方法中 就可以用this.$router获取current属性，也就是当前的路由。我们遍历路由表，然后找出当前的路由的对象，拿到component，然后渲染出去。

以上就是vue-router的简单实现。实际上只实现了router-link和router-view这两个功能。后续有空再继续更新