vue-router 路由实现原理

vue-router作为Vue全家桶实现spa的重要部分主要实现以下功能:

当页面url发生变化，不刷新页面，只改变渲染的组件(通过hash，或者history api)

拆分为以下三部分

1.监听url发生变化，并将url加入响应式数据，使得其他组件会重新执行render

2.提供router-view组件充当占位容器，当url发生变化，更新内部组件

3.提供router-link组件用于路由切换

实现:

1.创建Class VueRouter，并监听hash变化

class VueRouter {
  constructor(options){
    this.options =options
    //数据响应式，current必须是响应式的，这样他变化，使用他的组件就会更新render
    //利用Vue.util.defineReactive实现响应式
   Vue.util.defineReactive(this,'current',window.location.hash.slice(1)||'/')
    //监控url变化
    window.addEventListener('hashchange',()=>{
      this.current = window.location.hash.slice(1)
    })
  }
}