我们首先要实现 Router 类去管理路由，并且，我们使用 createWebHashHistory 来返回 hash 模式相关的监听代码，以及返回当前 URL 和监听 hashchange 事件的方法；然后，我们通过 Router 类的 install 方法注册了 Router 的实例，并对外暴露 createRouter 方法去创建 Router 实例；最后还要暴露 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 useRouter(){
    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) // 传递实例到router中
        app.component("router-link",RouterLink)
        app.component("router-view",RouterView)
    }
}

export {createRouter,createWebHashHistory,useRouter}

有了上面这段代码，我们回到 src/router/index.js 中，可以看到下面代码的使用方式，我们使用 createWebHashHistory 作为 history 参数，使用 routes 作为页面的参数传递给 createRouter 函数

import {
    createRouter,
    createWebHashHistory,
} from '手写的router存放的文件'
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

上面router实现中我们还看到了两个最重要的内置组件挂载 —— router-view 和 router-link。
在 createRouter 函数 创建的 Router 实例上，current 返回当前的路由地址，并且使用 ref 包裹成响应式的数据。
router-view 组件的功能，就是 current 发生变化的时候，去匹配 current 地址对应的组件，然后动态渲染到 router-view 就可以了。
我们在router相同目录下新建 RouterView.vue，写出下面的代码。在代码中，我们首先使用 useRouter 获取当前路由的实例；然后通过当前的路由，也就是 router.current.value 的值，在用户路由配置 route 中计算出匹配的组件；最后通过计算属性返回 comp 变量，在 template 内部使用 component 组件动态渲染。

<template>
    <component :is="comp"></component>
</template>
<script setup>

import {computed } from 'vue'
import { useRouter } from '手写router的文件'

let router = useRouter()

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

有了 RouterView 组件后，我们再来实现 router-link 组件。我们在 router相同文件夹 下面新建文件 RouterILink.vue，并写入下面的代码。代码中的 template 依然是渲染一个 a 标签，只是把 a 标签的 href 属性前面加了个一个 #， 就实现了 hash 的修改。

<template>
    <a :href="'#'+props.to">
        <slot />
    </a>
</template>

<script setup>
import {defineProps} from 'vue'
let props = defineProps({ // 获取调用组件时传的值
    to:{type:String,required:true}
})

</script>

这样，一个 hash 模式的迷你 vue-router 就算实现了。