简单手写vue-router

前言

我们已经完成了install函数的书写了，现在就要进入构造函数的书写阶段了

往期记录

构造函数

构造函数需求梳理

我们可以看到，在我们实例化 VueRouter的时候，需要接受一个参数options

vue-router有三个要素：

• routeMap: 路由map指路由与组件的映射关系
• data: 路由视图指路由映射对应组件的渲染位置
• options: 路由导航指可以使地址栏发生变化的导航链接 那就很明确了

代码实现

constructor(options) {
    // 记录构造函数中传入的选项
    this.options = options
    // 将来将options的规则解析到 routeMap中来，键值对的形式
    this.routeMap = {}
    // data是响应式的对象，使用vue的提供的方法,方便之后路由更新我们可以及时更新页面
    this.data = _vue.observable({
      current: '/'
    })
  }

就这么简单，我们就又实现了一大步！加油 奥里给！

但是就这么结束了可不太行，接下来我们还需要书写createRouteMap方法

createRouteMap

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

/**
   * @description  遍历路由规则,把路由规则解析成键值对的形式，储存到routeMap中 
   */
  createRouteMap(){
    this.options.routes.forEach(route => {
      this.routeMap[route.path] = route.component
    })
  }

这个方法很简单，就是遍历整个数组，然后把对应的影视关系和路由规则建立好就好