hash与history原理

hash

首次加载 首次进入页面主动获取地址栏的hash值 用hash值去匹配路由规则 找到要渲染的组件进行渲染
监听hashChange事件 当hash值发生变化获得新的hash值 根据路由规则去渲染组件

export default {
  name: "router-view",
  data() {
    return {
      component: null,
    };
  },
  render(h) {
    return h(this.component); //显示组件
  },

  methods: {
    renderView() {
      // 获得hash值
      let hashValue = "";
      if (location.hash) {
        hashValue = location.hash.replace("#", "");
      } else {
        hashValue = "/";
        location.hash = "#/";
      }
      // 获得处理好的hash值，找到要渲染的组件。
      const routes = this.$router.$options.routes;
      const { component } = routes.find((route) => hashValue === route.path); //Home
      // 设置要渲染的组件给data上的属性，可以重新渲染组件
      this.component = component;
    },
  },

  mounted() {
    // 刚进入项目，手动刷新
    /* window.addEventListener('load', ()=>{
      console.log('load');
    }) */
    // 直接在mounted方法中处理hash值
    this.renderView();

    // 监听地址栏的hash值的变化
    window.addEventListener("hashchange", () => {
      this.renderView();
    });
  },
};

history

首次进入页面获取地址栏的pathName地址 根据地址去匹配路由规则 找到对应的组件进行渲染 当路由发生变化不是直接修改地址 通过pushState事件去修改地址 而不是重新请求服务器 当地址栏发生回退事件 需要监听popstate事件
根据新的地址进行渲染

export default {
  name: "router-view",
  data() {
    return {
      component: null,
    };
  },
  render(h) {
    return h(this.component);
  },
  methods: {
    renderView() {
      // 获得path
      const path = location.pathname;

      // 根据路由规则找到对应路径的组件
      const routes = this.$router.$options.routes;
      const { component } = routes.find((route) => route.path === path);
      this.component = component;
    },
  },
  mounted() {
    // 首次进入，手动刷新
    this.renderView();

    // 监听eventBus中的path-change事件
    this.$eventBus.$on("path-change", () => {
      this.renderView();
    });

    // 监听返回事件
    window.addEventListener('popstate', ()=>{
      this.renderView();
    })
  },
};

以上代码只是简单的实现了路由的跳转 其余的功能并不具备