前言

vue中使用到的路由插件是vue-router。它是vue官方路由插件，依赖于Vue。近期学习了下vue-router源码，并自己写了一个小例子,包含动态路由addRoutes，router-view，router-link。

现在让我们看一看vue-router到底是怎样实现的！让我们静下心来好好看看

实现文件目录：

首先我们第一步引入：
router/index.js文件中：

import VueRoutes from './routes/VueRoutes.js'
Vue.use(VueRoutes);
..........
let routers = new VueRoutes({
  mode: 'hash',
  routes
})
复制代码

我们知道Vue.use(plugin)，会执行install方法。

install.js文件中

import routerView from "./view.js"
import routerLink from "./viewLink.js"
export default function install(Vue) {
  // 每个组件混入该生命周期
  Vue.mixin({
    beforeCreate() {
      //  判断是否是根组件options中才有router，根组件才执行，在你new Vue时会传入     
      //  一个let router=new VueRoutes();
      if (this.$options.router) {
        this._rootRouter = this;
        this._router = this.$options.router;
        // 重点：路由初始化
        this._router.init(this)
        // 进行设置_route的响应式，当_route发生变化时会进行页面更新
        Vue.util.defineReactive(this, "_route", this._router.history.current);
      } else {
        this._rootRouter = this.$parent && this.$parent._rootRouter;
      }
    },
  });
  
  Object.defineProperty(Vue.prototype, "$route", {
    get() {
      return this._rootRouter._route;
    }
  })
  Object.defineProperty(Vue.prototype, "$router", {
    get() {
      return this._rootRouter._router;
    }
  })
  //全局组件router-view router-link。具体后面会说
  Vue.component('RouterView', routerView);
  Vue.component('RouterLink',
    routerLink
  );
}
复制代码

我们可以知道install主要做了

利用mixin之后在每个组件中混入该beforeCreate生命周期
生命周期中对根组件进行设置私有属性_rootRouter，_router
每个子组件中获取this.$route,this.$router就会在向上寻找根组件上的_rootRouter._router和_rootRouter._route
注册全局组件router-view，router-link

下面看下路由的构造函数做了什么？

routes目录下

index.js文件中

export default function VueRoutes(options) {
  // 返回一个pathlist表示路由数组，与路由映射表 pathMap
  this.matcher = createMatcher(options || []);
  //路由模式有hash，history等，我们主要以hash来讲
  this.history = new HASHHistory(this);
  //下面会讲，路由初始化
  this.init=function(){
     ...
  }
  //通过跳转url，获取到路由映射表
  this.match=function(location) {
    return this.matcher["match"](location)
  }
  //this.$router.push跳转
  this.push=function(path){
      this.history.push(path);
  }
  //添加动态路由
  this.addRoutes=function(routes){
    this.matcher.addRoutes(routes);
  }
 
  })
 
VueRouters.install = install;
复制代码

构造函数中做了：

this.matcher返回match，addRoutes，匹配路由对象与添加路由，之后通过路由实例就能够添加动态路由，和获取路由的映射关系。
实例化一个history中，对url监听变化，重新获取跳转新的路由映射，更新_route页面重新渲染
路由的初始化，其中的关键transitionTo，监听路由的变化后对页面的更新

以上三点我们一一看代码详细说吧

createMatcher.js

（1）

export default function createMatcher(options) {
  // 返回路径的列表, 路径和路由对象的映射
  var {
    pathList,
    pathMap
  } = createRouteMap(options.routes);
  console.log(pathList, pathMap);
    
  // 添加动态路由
  function addRoutes(routes) {
    let obj = createRouteMap(routes, pathList, pathMap);
  }
  // 当路由发生变化的时候，会进行查找该路由 所对应的映射关系，router-view 会用到
  function match(location) {
    let record = pathMap[location];
    let local = {
      path: location
    }
    // 找到当前的记录
    // 需要 到对应的记录，并且根据记录产生一个匹配 的数组
    if (record) {
      return createRoute(record, local)
    }
    // 没有记录则返回为空
    return createRoute(null, local)

  }
  return {
    match,
    addRoutes
  }

}

复制代码

在createMatcher中，传入routes，之后计算出pathList，pathMap。我们来看下createRouteMap实现

createRouteMap.js

export default function createRouteMap(routes, pathList, pathMap) {
  // 处理routes中的路由映射
  pathList = pathList ? pathList : [];
  pathMap = pathMap ? pathMap : Object.create(null);

  //  遍历路由添加到pathList，pathMap中
  routes.forEach(val => {
    addRoutesRecord(val, pathList, pathMap);
  })
  return {
    pathList,
    pathMap
  }
}
复制代码

把routes传入之后继续进行遍历之后，添加到pathList，pathMap中

看下addRoutesRecord的实现：

function addRoutesRecord(routes, pathList, pathMap, parent) {
  let path
  //parent是当遍历的是chilren中的路由才有的parent
  if (parent) {
    path = `${parent.path}/${routes.path}`;
  } else {
    path = routes.path;
  }
  let record = {
    path: path,
    component: routes.component,
    parent
  }
  if (!pathMap[path]) {
    pathList.push(path);
    pathMap[path] = record;
  }

  //   如果有children 就继续遍历，生成扁平化放进数组
  if (routes.children) {
    routes.children.forEach(val => {
    //routes传进去，表示当前路由的父路由
      addRoutesRecord(val, pathList, pathMap, routes)
    })
  }

}
复制代码

routes有children情况下，会继续执行addRoutesRecord，继续添加到pathList，pathaMap中。变成一维数组吧。转化请看下面，还会有parent，之后会在路由变化，router-view重新生成render中用到。

const routes = [{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import( /* webpackChunkName: "about" */ '../views/About.vue'),
    children: [{
        path: 'aaa',
        component: aaa
      },
      {
        path: 'bbb',
        component: bbb
      }
    ]
  }
  
复制代码

变成

HashHistory.js

（2）
接下来我们看下

this.history = new HashHistory(this);

因为小例子所以我们只关心hash路由模式，它会继承于HashHistory，HashHistory会继承于BaseHistory基类。因为之前考虑history，hash，abstract都有共同的属性与方法。

看下HashHistory

export default class HASHHistory extends BaseHistory {
  constructor(app) {
      super(app);
      
  }
  getCurrentLocation() {
    return getHash();
  }
  setlister() {
    // 设置监听hash的变化
    window.addEventListener("hashchange", () => {
      this.transitionTo(getHash());
      // console.log();
    })
  }
}

复制代码

监听了路由的变化，会执行this.tansitionTo(url),重要看下基类中的transitionTo实现

BaseHistory类中：

  // 跳转的核心逻辑location 
  this.transitionTo=function(location, oncomplete) {
    let routes=this.router.match(location);
     //是否与之前的           
     if(this.current.path==location&&this.current.matched.length==routes.matched.length)}    {
      return;
    }
    getCurrent(this,routes)
    // 执行监听路由的变化
    oncomplete && oncomplete();
    // 执行页面的更新
    this.cb&&this.cb(routes);
  }
   this.listen=function(cb){
    this.cb=cb;
  }
 }
复制代码

判断跳转的url，获取到它的路由映射关系，执行cb更新路由实例的_route，更新页面。

（3）看下init，在vueRoutes构造函数中

this.init=function(app){
    let setlister = function (_that) {
      _that.history.setlister();
    }
    // 默认会执行一次
    this.history.transitionTo(this.history.getCurrentLocation(), setlister(this));
    // 视图更新，已经对实例的_route进行拦截，发生变化会进行对页面的更新
    this.history.listen(route=>{
      app._route=route;
    })
 }
复制代码

在初始化过程中，默认会执行一次transitionTo，之后transitionTo中匹配到类似像{path：“/”,matched:[...]};之后赋值于app._route，更新页面。我们知道路由的变化会导致router-view重新生成render,渲染到页面。

router-view是一个全局组件，它的实现是一个函数式渲染

export default {
  functional: true,
  render(h, {
    parent,
    data
  }) {
  //获取到当前的路由对象
    let route = parent.$route;
    let match = route.matched;
    data.routerViews = true;
    let depth = 0
    while (parent) {
      if (parent.$vnode && parent.$vnode.data.routerViews) {
        depth++;
      }
      parent = parent.$parent;
    }
    let record = match[depth];
    if (!record) {
      return h()
    }
    let component = record.component;
    return h(component, data)
  }
}

复制代码

此时matcher比如长这样：

知道当前路由的映射，路径path与组件component。假如嵌套路由时候，这时会有两个router-view，第一个router-view执行后设置一个状态，data.routerViews = true;之后在次只要根据判断(parent.$vnodeparent.$vnode.data.routerViews)为true则证明现在是第二个router-view。