一、路由
（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)
}
}
