vue源码--vue-router根据源码实现方式-造轮子

分析vue-router的使用下图：

vue-router源码分析：

1、路由的创建需要使用new关键字，说明vue-router是一个构造函数，需要用new来实例化一个构造函数。

2、使用实例化的对象时需要使用use方法，说明vue-router是一个插件。

3、router-link和router-view是组件，需要去实现他。

代码入下图：

1、创建VueRouter类，实现构造函数，保存用户的路由。

2、通过Vue.use(VueRouter)得知是一个插件，接下来需要实现插件。

在install中需要用到全局混入，通过混入延迟到vue组件实例，有了router以后，在vue实例下创建$router。将$options.router赋值给vue实例下的$router，这样就实现了this.$router.push()方法。

3、实现router-link和router-view两个组件。

（1）router-link

a标签：router-link实际上要实现a标签的跳转

render():由于不能使用template模版编译，所以只用render函数渲染a标签。

to：作为父组件传递给子组件的一个值。设定为必传。

this.$slot.default:通过插槽，将父组件里的内容传递给子组件。

最后需要实现的链接：

return {this.$slots.default}

（2）router-view

router-view作为路由的出口，进行渲染路径下组件的内容。需要在$router.$options下面定义个current参数，表示当前路径。这里我们用hash模式实现，这就需要在创建VueRouter实例对current进行定义，如下图：

第一步：获取当前路由，同时通过defineReactive对current定义为响应式数据，这样就能确保this.current改变时，router-view能再次r执行ender函数。

第二步：全局监听hashchange方法，当hash路由改变时，就把当前路径传递给current。

最后在router-view中，通过current路径在找到$router.$options.routes下面对应的组件，并对组件进行渲染。

最后vue-router轮子造完了，这个案例暂时没有实现子级路由嵌套问题，而vue底层是通过命名depth深度变量，来计算路由深度，通过计算深度，来确定父子级关系。