mini-vue-router

// 该文件是用户引入我自己创建的 mini-router ,进行各种配置
import Vue from "vue";
// 这是我自己创建的配置文件
// import VueRouter from 'vue-router'
import VueRouter from "../mini-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

// Vue.use 就是执行了 VueRouter 的 install 方法
// use  方法就是把 Vue 自己作为参数传给了 VueRouter 使用，mini-router.js 那边的 VueRouter.install 接收 Vue 作为参数作为全局去使用。
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
  // {
  //   path: "/about",
  //   name: "About",
  //   component: () => import("../views/About.vue"),
  // },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

// 我们自己的 vue-router

// 创建全局组件 router-link  router-view

// VueRouter 是一个类

// VueRouter 必须有一个 install 方法

// main.js 内引入了 router 那么所有组件内都有
// $router 指的是 VueRouter 类

let Vue;
class VueRouter {
  // 默认会创建一些方法
  constructor(options) {
    this.options = options;
    console.log(this.options);
    console.log(Vue);

    // 实例的时候就已经写好了
    this.initComponents();
  }
  // 制作一个路由表 {'/':Home}
  // 两个事件
  // 进入页面
  // 页面地址值变化
  // this.routeMap = this.options.routes

  // 创建全局的两个组件 <router-link> <router-view>
  initComponents() {
    Vue.component("router-link", {
      render(h) {
        const { to, tag } = this;
        return <tag href={to}>{this.$slots.default}</tag>;
      },
      props: {
        to: {
          type: String,
        },
        tag: {
          type: String,
          default: "a",
        },
      },
    });
    Vue.component("router-view", {
      render(h) {
        return null;
      },
    });
  }
}

// install 方法会接受 Vue 类作为参数，那么在这将 Vue 暴露出去，当全局来使用
VueRouter.install = (_Vue) => {
  Vue = _Vue;

  // 给 vue 组件做全局配置
  // 这个操作给 Vue 整个 类添加 $router 属性
  // Vue.prototype.$router = 用户创建的路由;
  // 当再次 new Vue 的时候里面也有了 $router 这个其实是不对的
  // 正确的方法应该使用 混入mixin 添加 $router 属性
  Vue.mixin({
    beforeCreate() {
      // 所有组件都触发了， 给所有组件(除了根组件) 添加 $router 属性
      // 只有根组件的 $options 内添加了 router 之后所有子组件才添加 $router 属性
      // console.log(this);
      // 在 main.js 中 new Vue 传递的参数其实可以使用组件 this.$options 获取
      // this 是根组件，他有个方法 $options,如果传入了 router，那么就开始对他进行一些操作。
      // 现在只要记住在根组件下判断有没有这个 router 路由，如果有就给它添加一些东西。
      // 如果使用 Vue.prototype.$router = VueRouter; 直接添加的话，可能造成一些污染，下次在创建东西的时候也会添加 VueRouter，造成不必要的，所以选用 Vue.mixin。

      if (!this.$options.router) {
        // console.log(this, "根组件");
        // 判断如果不是根组件的话就往下操作，现在是进入到了App组件，现在又判断根组件内是否有实例，有的话就把根组件的实例给现在的App组件。
        if (this.$parent.$options.router) {
          this.$router = this.$parent.$options.router;
        } else {
          // 现在不是 App 组件，是其他组件，然后判断现在的这个其他组件他的父组件有没有实例，有实例的话就这个其他组件他就加上实例组件
          if (this.$parent.$router) {
            this.$router = this.$parent.$router;
          }
        }
      }

      // 先判断根组件是否接收 router 接收的话
    },
  });
  // 创建全局的两个组件
  // Vue.component("router-link", {
  //   render: (h) => <a herf={this.to}>{this.$sslots.default}</a>,
  //   props: {
  //     to: {
  //       type: String,
  //     },
  //   },
  // });
};

export default VueRouter;

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// new Vue 创建一个 vue 实例，其实就是一个 vue 组件，这个组件就是根组件，是属于 vue 内所有组件的祖先，也就是其他组件 (App Home About) 都会继承该组件
// 
// new Vue 传递的参数其实可以使用组件 this.$options 获取
// 先明白 Vue 里面有 router 会对 Vue 产生什么影响，会改变什么 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// Vue.prototype.$router = VueRouter; 不使用，添加了也没有用
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')