简易 vue-router 源码 #

let Vue;

class VueRouter {
  constructor(options) {
    this.$options = options;
    this.routeMap = {};
    this.app = new Vue({
      data: {
        current: "/",
      },
    });
  }

  // 绑定事件
  init() {
    this.bindEvents();
    this.createRouteMap(this.$options);
    this.initComponent();
  }
  bindEventListener(type) {
    // const bindEventListener = function (type) {
    const historyEvent = history[type];
    return function () {
      const newEvent = historyEvent.apply(this, arguments);
      const e = new Event(type);
      e.arguments = arguments;
      window.dispatchEvent(e);
      return newEvent;
    };
    // };
  }
  bindEvents() {
    window.addEventListener("load", this.onHashChange.bind(this), false);
    window.addEventListener("hashchange", this.onHashChange.bind(this), false);

    history.pushState = this.bindEventListener("pushState");
    history.replaceState = this.bindEventListener("replaceState");
    window.addEventListener("pushState", this.onHashChange.bind(this), false);
    // window.addEventListener(
    //   "popstate",
    //   function a() {
    //     console.log(1);
    //   },
    //   false
    // );
  }
  // 路由映射表;
  createRouteMap(options) {
    options.routes.forEach((item) => {
      this.routeMap[item.path] = item;
    });
  }
  initComponent() {
    Vue.component("router-link", {
      props: {
        to: String,
      },
      render(h) {
        // return <a href={this.to}>{this.$slots.default}</a>;
        return h(
          "a",
          {
            attrs: {
              href: "#" + this.to,
            },
          },
          [this.$slots.default]
        );
      },
    });

    Vue.component("router-view", {
      render: (h) => {
        var component = this.routeMap[this.app.current].component;
        return h(component);
      },
    });
  }
  // 设置当前路径
  onHashChange() {
    console.log("渲染");
    console.log(window.location.hash);
    this.app.current = window.location.hash.slice(1) || "/";
    console.log(this.app.current);
  }
  // function getUrl (path) {
  //   const href = window.location.href
  //   const i = href.indexOf('#')
  //   const base = i >= 0 ? href.slice(0, i) : href
  //   return `${base}#${path}`
  // }
}

// 插件逻辑
VueRouter.install = function (_Vue) {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.router) {
        //确保是根组件时执⾏⼀次，将router实例放到Vue原型，以后所有组件实例就均有$router
        Vue.prototype.$router = this.$options.router;
        this.$options.router.init();
      }
    },
  });
};

export default VueRouter;