vue3中的router怎么配举个例子

以下是一个简单的例子，演示如何在Vue3中使用Vue Router：

首先，在终端中安装Vue Router：

npm install vue-router@next

在main.js文件中导入Vue Router和Vue：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

创建一个router.js文件，并定义路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

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

export default router

在App.vue文件中添加路由链接和路由出口：

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

创建两个视图组件：Home.vue和About.vue，并在其中添加一些内容。
运行应用程序，你应该能够在浏览器中看到两个链接，点击链接时，页面会根据路由跳转到相应的视图组件