vue-router 原理

模拟实现一个vue-router,详见 vuerouter/index.js

借助vuecli 搭建一个vue-router项目，替换掉VueRouter部分为我们自定义的类，目前实现的功能

• history 模式
• hash 模式
• router-view
• router-link

vue-router 结构

类图

VueRouter
+ options + data + routeMap
+ Constructor(Options):VueRouter _ install(Vue): void + init(): void + initEvent(): void + createRouteMap(): void + initComponents(Vue): void

• options 记录构造函数中的对象

• data 响应式对象

  • current 记录当前路由地址

• routeMap 记录路由和组件的对应关系

• install 静态方法实现vue插件

• initEvent 监听浏览器地址变化

• createRouteMap 出事话routeMap 属性，把构造函数的路由规则转换成键值对存在routeMap中

• initComponents 创建router-link和router-view两个组件