vue-router源码解读

文章目录

  • 目录结构
  • 路由组件
  • 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打包插件/包

你可能感兴趣的:(前端框架/Vue,vue,vue-router,html5,history,javascript)