参考simple-routing-from-scratch

官方给的是 vue2+js 的写法，用 vue3+ts 简单改一下：

<script setup lang="ts">
import HelloWorld from "./views/HelloWorld.vue";
import Gadget from "./views/Gadget.vue";
import { reactive, computed } from "vue";

const data: any = reactive({
    currentPath: window.location.pathname,
    routes: {
        "/": HelloWorld,
        "/Gadget": Gadget,
    },
});

window.addEventListener("hashchange", () => {
    data.currentPath = window.location.hash;
});

const currentView = computed(() => {
    return data.routes[data.currentPath.slice(1) || "/"] || HelloWorld;
});
</script>

<template>
    <a href="./">Home</a> | <a href="#/Gadget">Gadget</a> |
    <component :is="currentView" />
</template>