vue-router原理与源码分析

todo

使用:

1,新建路由表:

const routes = []
export default routes

2,新建router实例

3,将router实例注册到vue实例中

4,使用

路由有三种模式,分别是:hash、history、abstract

三种模式本质上的区别是创建的history对象类型不同

hash模式创建的是HashHistory对象

history模式创建的是HTML5History对象

abstract模式创建的是AbstractHistory对象

 

路由修改过程

1、  HashHistory:通过监听 hashChange 事件来实现监听地址的变化

window.addEventListener('hashchange', () => {
  // this.transitionTo(...)
})

2、  transitionTo:hashchange 时,执行 history.transitionTo(...),在这个过程中,会进行地址匹配,得到一个对应当前地址的 route,然后将其设置到对应的 vm._route 上

3、  vm._route:对 vm._route 的赋值会被 Vue 拦截到,并且触发 Vue 组件的更新渲染流程

4、   

posted @ 2019-12-29 01:23  雨打芭蕉wt  阅读(248)  评论(0编辑  收藏  举报