上一篇文章已经介绍了核心模块。这篇文章介绍外围的提供给用户的 api 是怎么实现的,还有如何将变化同步到浏览器 url 的。

对于外围 api,会考虑兼容降级调用浏览器提供的 BOM api,所以先要对这部分知识有一个基本的理解,可以参考本系列文章的第一篇。

这部分代码是真的难读,某某某.push某某某.history满屏幕都是,字段名又是命名得类似而且一词用于多义,有时候都分不清谁是谁了。再者考虑了兼容性问题,就算是搜出来的字段,经常不知道要点进哪个文件去看。

如果没有处理路径切换,整个路由器就没法运作,就跟没用一样。可见路径切换模块在其中的核心地位。

讲到“路径切换”,history.transitionTo是位于内部的核心。也就是绝大多数提供给用户的函数,最终都会执行到这里,开启路径切换的流程。

其间值得注意的是,利用迭代器设计模式,可简洁实现路由守卫,是非常巧妙的代码设计,会提前详细介绍。

到文章最后,文字描述路径切换的流程骨架。再剩余每个繁杂具体的 queue 钩子函数没有介绍,留给读者自行仔细研读。

方法论:只要明白了某个模块的目的或者功能(或者函数签名、函数参数和返回),在多数情况下都不用关心其繁杂的具体实现。

以本文内容为例,只要掌握了核心模块createMatcher函数,及其返回的方法matcher.match 二者的作用和原理,就能理清相关模块的整体架构。

再后面就是枯燥的具体实现。如果你也想实现一个前端路由库并且想参考其源码,后半部分姑且可以当做字段字典来查阅。

如果明白了上一篇文章,Vue-Router的核心原理,那么这一篇就没啥好看的,初始化和实例化工作,就是根据原理来枯燥地具体实现还有edge case的处理。

枯燥预警!!!笔者也没挖掘出什么看点,如果你也想实现一个前端路由库并且想参考其源码,姑且可以当做字段字典来查阅。

若要深挖 Vue-Router 的源码,代码真的是又臭又长。本系列依旧提取源码中的核心原理并且尽量用文本概括繁杂的逻辑流程。

Vue-Router 实际上只适用于单页应用(其实这个结论是可以推理出来的)。而像 Nuxt 之类的看似是用到了 Vue-Router 且像是多页的,实际上是它们是用到了多个 Vue-Router。记住单页与多页的区分,这个区分贯穿了本文的脉络。