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
文章图片
【vue源码--vue-router根据源码实现方式-造轮子】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深度变量，来计算路由深度，通过计算深度，来确定父子级关系。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- Android事件传递源码分析
- VueX--VUE核心插件
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- [源码解析]|[源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)
- ffmpeg源码分析01（结构体）
- Java程序员阅读源码的小技巧，原来大牛都是这样读的，赶紧看看！
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布