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 <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深度变量,来计算路由深度,通过计算深度,来确定父子级关系。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容