参考simple-routing-from-scratch

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

<script setup lang="ts">
import { computed, reactive } from 'vue'
import Gadget from './views/Gadget.vue'
import HelloWorld from './views/HelloWorld.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>