2020-10-19
手写VUE-ROUTER 1
history router:
- 通过 history.pushState() 方法改变地址栏
- 监听 popstate 事件
- 根据当前路由地址找到对应组件重新渲染
hash router:
- hash 模式是吧 URL 中 # 后面的内容作为路劲地址
- 监听 hashchange 事件
- 根据当前路由地址找到对应组件重新渲染
- 注意 hash模式不会根据路由去后端请求页面
VueRouter 类图属性
- options: 记录 new VueRouter 传入的对象 里面有rules路由规则
- data: 是一个对象 里面有一个current属性记录当前路由地址 data对象是响应式的
- routerMap: 记录路由地址和组件的对应关系 一般将路由规则解析到routerMap中
VueRouter 类图方法
- Construction(Options): VueRouter 初始化各种属性
- static install(Vue): void：静态方法install 实现VUE的插件机制
- init():void 调用下面3个init 方法
- initEvent():void 注册popState事件 监听浏览器历史的变化
- createRouteMap():void 初始化 routeMap 属性 将传入的路由规则转换成键值对的格式存到routeMap
- initComponents(Vue):void 创建router-link 和 router-view 两个组件