在 Vue 3 中配置 Vue Router 的步骤如下：

安装 Vue Router：

如果你还没有安装 Vue Router，可以使用 npm 或 yarn 来安装它。

npm install vue-router@4
# 或者
yarn add vue-router@4

创建路由文件：

在你的项目中创建一个 router 文件夹，并在其中创建一个 index.js 文件（或者任何其他你喜欢的命名，但确保在主入口文件中正确引用）。

// router/index.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(process.env.BASE_URL),
  routes
});

export default router;

在主入口文件中引入并使用路由器：

在你的 main.js（或 index.js）文件中，导入创建的路由器并将其传递给 Vue 应用实例。

// main.js 或 index.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

创建视图组件：

确保你已经创建了路由将要加载的组件，例如 Home.vue 和 About.vue。这些组件通常位于 views 文件夹中。

在你的 Vue 组件中，使用 <router-link> 来创建导航链接。

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view/>
  </div>
</template>

配置路由守卫（可选）：

如果需要，你可以在路由器配置中添加路由守卫，例如导航守卫。

// router/index.js
router.beforeEach((to, from, next) => {
  // 在这里检查路由权限等
  next();
});

运行项目：

使用 Vue CLI 或 Vite 等工具运行你的项目，并确保路由按预期工作。

npm run serve
# 或者
yarn serve

确保你的项目结构、文件路径和组件名称与上述示例相匹配，或者根据你的项目实际情况进行调整。