vue3静态路由创建并跳转页面

在 Vue 3 中，你可以使用 Vue Router 来创建静态路由并跳转页面。下面是一个简单的示例代码：

首先，确保你已经安装了 Vue Router：

npm install vue-router

然后，在你的 main.js（或者你的入口文件）中引入 Vue Router 并创建一个路由实例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home }, // 定义根路径对应的组件
    { path: '/about', component: About } // 定义其他路径对应的组件
  ]
})

const app = createApp(App)

// 将路由实例挂载到根组件上
app.use(router)

app.mount('#app')

接下来，在你的 App.vue 文件中，你可以使用 `<router-link>` 组件来创建跳转链接：

<template>
  <div>
    <h1>My App</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

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

最后，在