在项目实战中,我在vue-router踩的坑,和我的发现,深入探索vue-router底层实现

vue

关于vue-router的一些发现


先说结论:name重名导致路由匹配错误


OneNote中的记录

关于这个问题我的思考和探索过程

首先,我能想到的就是无论vue-router内部是怎么处理的,最后在通过路由对象匹配对应组件的时候,name的优先级会高于path,这一点是显而易见的因为一开始我this.$router.push('string')中写的path是没错的,如果path优先级高于name,我就不会发现我那个很二的错误,也就不会有这篇文章了

贴出一张Call Stack的截图证实我的猜测

其次,我在this.$router.push('string')时,我push的是一个字符串而不是一个对象,我们都知道,vue-router是在我们初始化组件的时候,准确的说是beforeCreated的时候会为我们初始化路由对象的,路由对象有唯一映射的component,但是我只传入了一个string而已,他怎么知道我想跳转到哪个路由对象,理所当然的我就想到了可能vue-router内部会根据我传入的string去匹配内部的一个路由对象池,或者说构造一个路由对象(很快构造对象这个结论就被师兄否定了,仔细思考后,这个想法确实是有缺偏颇)

揭露路由对象的面纱

到这里,我已经有很大的把握vue-router是通过我穿的path匹配对应的路由对象的

再次在Call Stack中寻找蛛丝马迹

看看我发现了什么!!

到这里我们可以看到VueRouter对象中的确有一个matcher,并且里面构造了Map,addRouteRecord函数太过冗杂这里就不贴出来了,有兴趣的小伙伴可以去GitHub上找到vue-router的源码自行查阅哦


Tips

这是博主的第一篇博客,有很多不足的地方还请大家包含,文中的内容是我个人的看法,如果有不同的意见,欢迎在评论区指出,感谢看到这里的小伙伴们,同样喜欢JavaScript的同学有空可以一起交流一下噢,转发标明出处即可

以上是 在项目实战中,我在vue-router踩的坑,和我的发现,深入探索vue-router底层实现 的全部内容, 来源链接: utcz.com/z/376722.html

回到顶部