代码实现

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">1</router-link>
    <router-link to="/2">2</router-link>
    <router-link to="/3">3</router-link>
  </nav>

  <router-view></router-view>
</template>

<script>
export default {};
</script>

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./routes";

const app = createApp(App);

app.use(router);

app.mount("#app");

// router.js
import PageOne from "./components/PageOne.vue";
import PageTwo from "./components/PageTwo.vue";
import PageThree from "./components/PageThree.vue";

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    component: PageOne,
  },
  {
    path: "/2",
    component: PageTwo,
  },
  {
    path: "/3",
    component: PageThree,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;