手写vue-router之history模式【二、实现分析】

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

前情提要

前面已经讲过关于Vue-router基本功能的前置信息。主要说了下前端路由的概念，以及前端路由的集中模式和分别对应的原理，表现和兼容情况等。那么现在咱们从项目中Vue-router的实际使用上来看进行一个实现的分析。

回顾项目中路由插件的核心使用代码

• 代码

  // router/index.js中对router插件进行注册
  import Router from 'vue-router';
  Vue.use(Router);
  // 实例化路由对象
  const router = new Router({
      routes: [ { name: 'home', path: '/', component: <homeComponentPath> } ]
  })
  // main.js
  // 创建Vue实例的时候，注册router对象
  new Vue({
      router, 
      render: h => h(App)
  }).$mount('#app');
  

• 分析
  • 根据使用Vue.use对路由对象注册，则说明Router要么是一个对象，要么是一个函数。此处我们实现的时候采用对象的形式。如果是一个对象则该对象需要有一个install方法将该对象身上的方法在Vue实例上进行挂载。
  • 实例化路由对象的时候，通过new来实例化，则说明该Router是一个类或者一个方法，此处我们用类去实现。而根据上面的分析，该类需要有一个静态的install方法。
  • 根据实例化路由的时候传入了一个routers数组，该数组中记录了具体的路由地址所对应的页面级组件的地址。这个是我们需要关注的。
  • 根据上面的核心代码我们可以得出我们要实现的类有哪些属性和方法
    • 属性
      • options：记录实例化时传入的对象（包含路由配置routes，model，baseurl等）
      • data：用来记录当前路由的地址。需要使用Vue.observable设置成响应式的对象，毕竟路由变化的时候需要即时更新当前路由的信息。
      • routeMap：用来记录路由和组件的映射关系
    • 方法
      • Constructor(Options): VueRouter
      • _install(Vue)：注册方法，主要用于在vue中的注册
      • init()：实现对下面三个方法的调用
      • initEvent()：
      • createRouteMap()： 初始化routeMap属性
      • initComponents(Vue): 创建router-link和router-view两个组件

总结

我们上面已经对router的实现做了一个具体的分析，由结果推原理，推实现。那么接下来我们将着手实现history模式的路由...