手写VUE-ROUTER 1

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 两个组件