Vue-手写vue-router

1.vue-router的简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单⻚面应用变得易如反掌。

2.vue-router工作步骤

1.点击页面跳转，更改URL。
2.触发addEventListener事件，监听hash变化，
3.当URL发生改变时，改变vue-router里的current的变量。
4.监视current变量的监视者，获取current对应的最新组件，
5.Render最新的组件

3.实现vue-router的需求分析

1.vue-router作为一个插件，需要实现VueRouter类和install方法
2.实现全局组件:router-view用于显示匹配组件内容，
3.实现全局组件:router-link用于跳转
4.监控url变化:监听hashchange
5.响应最新url:创建一个响应式的属性current，当它改变时获取最新的组件
6.Render最新的组件

4.vue-router源码实现

4.1 在src/main.js添加实例

import router from './krouter'
new Vue({
  router,
}).$mount("#app");

4.2 在App.vue添加路由视图和导航

<div id="app">
  <div id="nav">
    <!-- 路由跳转连接 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <!-- 路由出口 -->
  <!-- 利用vue响应式：current -->
  <router-view/>
</div>

4.3 在src/krouter/index.js使用自定义的vue-router插件

import Vue from 'vue'
import VueRouter from './kvue-router'
Vue.use(VueRouter)

4.4 在src/krouter/kvue-router.js自定义vue-router插件

let Vue; // 在Vue.use(VueRouter),会传递Vue实例，在实现install方法里接收_Vue实例，保存在Vue里
class VueRouter {  //定义VueRouter类
  constructor(options) {
    // 1. 保存options,options里保存着routes表
    this.$options = options;
    // 2. 获取当前URL  
    const initial = window.location.hash.slice(1) || "/";
    // 3. 设置current为响应式数据,将来发生变化，router-view的render函数能够再次执行
    Vue.util.defineReactive(this, 'current', initial)
    // 4. 监听hash变化
    window.addEventListener("hashchange", () => {
      this.current = window.location.hash.slice(1);
    });
  }
}
// 参数1是Vue.use调用时传入的
VueRouter.install = function(_Vue) {
  // 1. 保存Vue实例
  Vue = _Vue;
  // 2.全局混入注册$router:延迟下面逻辑到router创建完毕并且附加到选项上时才执行
  Vue.mixin({
    beforeCreate() {
      // 次钩子在每个组件创建实例时都会调用
      // 根实例才有该选项
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router;
      }
    },
  });

  // 3.注册router-link组件
  Vue.component("router-link", {
    props: {
      to: {
        type: String,
        required: true,
      },
    },
    render(h) {
      // <a href="to">xxx</a>
      // return <a href={'#'+this.to}>{this.$slots.default}</a>
      return h(
        "a",
        {
          attrs: {
            href: "#" + this.to,
          },
        },
        this.$slots.default
      );
    },
  });
  // 4.注册router-view组件
  Vue.component("router-view", {
    render(h) {
       // 1. 保存前路由对应的组件
      let component = null
      // 根据this.$router.current获取最新的路由组件
      const route = this.$router.$options.routes.find(
        (route) => route.path === this.$router.current
      );
      console.log(route);
      if (route) {
        component = route.component
      }
      // console.log(this.$router.current, component);
      return h(component);
    },
  });
};
export default VueRouter;