分析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 <a href={'#'+this.to}>{this.$slots.default}</a>
(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深度变量,来计算路由深度,通过计算深度,来确定父子级关系。