Vue-router的原理以及实现

Vue-router 是vue主要的核心插件之一，也是SPA应用所必须依赖的一个核心插件，至于怎么使用或者说基础知识，这里不再赘述，我们直接上代码，下面是模仿实现的一个Vue-router的插件。

// 引用从install函数中传递进来的vue实例
let Vue;
class VueRouter {
  constructor(options) {
    this.$options = options;
    this.routerMap = {};

    // 主要是利用vue本身的响应式来实现，如果current变化，来刷新router-view
    this.app = new Vue({
      data: {
        current: '/',
      },
    });
  }

  createInit() {
    this.bindEvents(); //监听url变化
    this.createRouteMap(this.$options); //解析路由配置
    this.createComponent(); //创建两个组件
  }
  bindEvents() {
    window.addEventListener('load', this.onHashChange.bind(this));
    window.addEventListener('hashchange', this.onHashChange.bind(this));
  }
  onHashChange() {
    this.app.current = window.location.hash.slice(1) || '/';
  }

  createRouteMap(options) {
    options.routes.forEach((item) => {
      this.routerMap[item.path] = item.component;
    });
  }

  createComponent() {
    // <router-link to="/">fff</router-link>
    Vue.component('router-link', {
      props: {
        to: {
          type: String,
        },
      },
      render(h) {
        return h('a', { attrs: { href: '#' + this.to } }, [
          this.$slots.default,
        ]);
      },
    });

    Vue.component('router-view', {
      render: (h) => {
        // 每次 this.app.current 也就是路由地址的变化，然后就会触发此处方法的重新调用
        const com = this.routerMap[this.app.current];
        console.log(this.app.current);
        return h(com);
      },
    });
  }
}

这部分代码主要是进行Vue的引用以及$router的设置

VueRouter.install = (_Vue) => {
  // 引用当前的vue实例
  Vue = _Vue;

  Vue.mixin({
    beforeCreate() {
      // 此处的this指向的是 new Vue() 实例
      if (this.$options.router) {
        // 仅在根组件的时候执行以下
        Vue.prototype.$router = this.$options.router;
        // 切记调用一下此方法，然后进行router中的方法初始化操作
        this.$options.router.createInit();
      }
    },
  });
};

外界使用的话，类似原本的 vue-router 的使用

// main.js
import VueRouter from './kRouter/index.js';

Vue.use(VueRouter);

// 注册路由模块
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/user', component: User },
  ],
});

new Vue({
  store,
  router,
  render: (h) => h(App),
}).$mount('#app');

但是此处只是实现了基本的一些功能，没有实现路由嵌套功能，此demo主要是展现其原理，不要在乎那些细节，希望通过此篇文章，能给学习 vue-router 的小伙伴提供一些参考和帮助。