Vue Router

Vue Router实现原理

Vue前置知识

1、插件

2、混入

3、Vue.obsercable()

4、插槽

5、render函数

6、运行时和完整版的Vue

Vue Router是前端路由，当路径切换的时候，在浏览器端判断当前路径并加载当前路径对应的组件

hash模式

1、URL中#后面的内容作为路径地址

2、监听hashchange事件

3、根据当前路由地址找到对应组件重新渲染

History模式

1、通过history.pushState()方法改变地址栏

2、监听popstate事件

3、根据当前路由地址找到对应组件重新渲染

Vue Router模拟实现

1、注册插件

2、Vue Router对象

3、类图

 

 

Vue Router Install

vue router注册插件的时候会用install

1、导出一个VueRouter的类

2、定义静态方法install

3、在install方法中

（1）判断当前插件是否已经被安装

（2）把Vue构造函数记录到全局变量

（3）把创建Vue实力时候传入的router对象注入到Vue实力上

Vue Router 构造函数

constructor中有三个参数：options、routeMap、data

Vue Router createRouteMap

遍历所有的路由规则，把路由规则解析成键值对的形式，存储到routeMap中

Vue Router initComponents