vue3-router

一、路由

（1）通过 URL 区分路由的机制上，有两种实现方式：

•  hash 模式：通过 URL 中 # 后面的内容做区分，我们称之为 hash-router；
•  history 模式：在这种方式下，路由看起来和正常的 URL 完全一致

 （2）这两个不同的原理，在 vue-router 中对应两个函数，分别是 createWebHashHistory 和createWebHistory。

二、实现原理 

 

 （1）hash模式

后来hash 值的变化并不会导致浏览器页面的刷新，只是会触发 hashchange 事件。在代码中，通过对 hashchange 事件的监听，可以在fn 函数内部进行动态地页面切换。

window.addEventListener('hashchange',fn)

（2） history模式

2014 年之后，因为 HTML5 标准发布，浏览器多了两个 API：pushState 和 replaceState。通过这两个 API ，我们可以改变 URL 地址，并且浏览器不会向后端发送请求，同时还会触发 popstate 事件。通过这两个 API 和 popstate 事件，我们就能用另外一种方式实现前端路由

window.addEventListener('popstate', fn)

 三、手写迷你vue-router

（1） 用 Router 类去管理路由。

（2）使用createWebHashHistory 来返回 hash 模式相关的监听代码，以及返回当前 URL 和监听hashchange 事件的方法。

（3）通过 Router 类的 install 方法注册了 Router 的实例，并对外暴露 createRouter 方法去创建 Router 实例。

（4）最后，暴露了useRouter方法，去获取路由实例。

import { ref, inject } from "vue";
import RouterLink from "./RouterLink.vue";
import RouterView from "./RouterView.vue";
const ROUTER_KEY = "__router__";

function createRouter(options) {
  return new Router(options);
}
function userRouter() {
  return inject(ROUTER_KEY);
}

function createWebHashHistory() {
  function bindEvents(fn) {
    window.addEventListener("hashchange", fn);
  }
  return {
    bindEvents,
    url: window.location.hash.slice(1) || "/",
  };
}

class Router {
  constructor(options) {
    this.history = options.history;
    this.routes = options.routes;
    this.current = ref(this.history.url);
    this.history.bindEvents(() => {
      this.current.value = window.location.hash.slice(1);
    });
  }
  install(app) {
    app.provide(ROUTER_KEY, this);
    app.component("router-link", RouterLink);
    app.component("router-view", RouterView);
  }
}

export { createRouter, createWebHashHistory, userRouter };

 （5）使用

import { createRouter, createWebHashHistory } from "./grouter/index";
import About from "../pages/about.vue";
import Count from "../components/Count.vue";
const routes = [
  {
    path: "/",
    name: "Home",
    component: Count,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

（6）内置组件 router-view

1、在 createRouter 创建的 Router 实例上，current 返回当前的路由地址，并且使用 ref 包裹成响应式的数据。

2、router-view 组件的功能，就是 current 发生变化的时候，去匹配 current 地址对应的组件，然后动态渲染到 router-view 就可以了。

3、首先使用 useRouter 获取当前路由的实例；然后通过当前的路由，也就是router.current.value 的值，在用户路由配置 route 中计算出匹配的组件。

4、 最后通过计算属性返回 comp 变量，在 template 内部使用 component 组件动态渲染

<template>
  <component :is="comp"></component>
</template>
<script setup>
import { computed } from "vue";
import { userRouter } from "../grouter/index";

let router = userRouter();
const comp = computed(() => {
  const route = router.routes.find(
    (route) => route.path === router.current.value
  );
  return route ? route.component : null;
});
</script>

（7） 内置组件 router-link

 template 渲染一个 a 标签，把 a 标签的 href 属性前面加了个一个 #， 就实现了 hash 的修改。

<template>
  <a :href="'#' + $props.to"><slot></slot></a>
</template>
<script setup>
let props = defineProps({
  to: { type: String, required: true },
});
</script>

 （8）注册 router-link 和 router-view 这两个组件

import {ref,inject} from 'vue'
import RouterLink from './RouterLink.vue'
import RouterView from './RouterView.vue'
class Router{
    //....
    install(app){
        app.provide(ROUTER_KEY,this)
        app.component("router-link",RouterLink)
        app.component("router-view",RouterView)
    }
}