文章目录

目录结构路由组件history与hash模式的实现如何拼装与install vue-router番外篇：如何用rollup打包插件/包 vue-router是vue全家桶中的一员。当初学习的时候，因为内容比较简单，只是匆匆浏览了一下文档就开始对照api干活了，对history mode的实现也仅仅是知道用到了h5的history的方法。这次其实是为了看看vue-router是怎么用roll-up打包的，但下下来之后发现代码量很少，说白了vue-router也只是一个Mixin而已。索性就通读一遍源码吧。

vue-router的版本是3.0.7，git clone后，我删掉了chromedriver包再npm install。因为这个包是chrome的驱动，非常庞大，是e2e测试的时候用的，基本用不着，建议删掉。

目录结构

vue-router采用roll-up打包，引入了Typescript。源代码放在src文件下。src的文件目录为：

— components 里面包含了link和view两个路由组件 — history 定义了History基类和AbstractHistory, HTML5History， HashHistory几个衍生类。是vue-router的功能实现的主体。 — util 定义了异步、dom处理、滚动处理等工具函数 — create-matcher.js 导出了createMatcher函数，该函数接收routes，router两个参数，返回具有match方法和addRoutes方法的Matcher对象。 — create-route-map.js 导出了createRouteMap函数。该函数根据routes和旧的pathMap等，生成新的pathList, pathMap, nameMap，并确保通配路由*永远在最后。 — index.js 打包入口文件，导出VueRouter类。 — install.js 将vue-router作为Mixin注入，注册RouterView，RouterLink组件，同时导出Vue供其他模块使用。

路由组件

history与hash模式的实现

如何拼装与install vue-router

番外篇：如何用rollup打包插件/包