（二）一个不用VueRouter的例子

<template>
  <nav>
    <a
      v-for="(route, path) in routes"
      :href="path"
      @click.prevent="changeRoute(path)"
      >{{ route.label }}</a
    >
  </nav>
  <component :is="currentPage" />
</template>

<script setup>
import PageOne from "./components/PageOne.vue";
import PageTwo from "./components/PageTwo.vue";
import PageThree from "./components/PageThree.vue";

import { ref, computed } from "vue";

const routes = {
  "/": {
    component: PageOne,
    label: "页面1",
  },
  "/2": {
    component: PageTwo,
    label: "页面2",
  },
  "/3": {
    component: PageThree,
    label: "页面3",
  },
};

const currentPath = ref(location.pathname);

const currentPage = computed(
  () => routes[currentPath.value].component || PageOne
);

function changeRoute(path) {
    // 使用浏览器自带的api 来实现
  history.pushState(null, null, path);
  currentPath.value = location.pathname;
}
</script>