在 Vue 3 项目中，你可以使用 Vue Router 来创建和配置路由。以下是一个基本的步骤来设置 Vue Router：
### 步骤 1: 安装 Vue Router
首先，如果你还没有安装 Vue Router，你可以通过 npm 或 yarn 来安装它：
```bash
npm install vue-router@4
# 或者
yarn add vue-router@4
```
请注意，Vue Router 4 是为 Vue 3 设计的。
### 步骤 2: 创建路由文件
通常，你会创建一个名为 `router` 的文件夹，并在其中创建一个 `index.js` 文件来配置路由。
```javascript
// 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;
```
在这个例子中，我们定义了两个路由：一个是到首页的根路径（`/`），另一个是到关于页面的路径（`/about`）。每个路由都映射到一个组件。
### 步骤 3: 在 main.js 中使用路由
接下来，你需要在 `main.js` 文件中导入并使用路由。
```javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
```
通过调用 `app.use(router)`，你将路由插件安装到你的 Vue 应用中。
### 步骤 4: 使用 `<router-view>` 和 `<router-link>`
在你的组件中，你可以使用 `<router-view>` 来显示当前匹配的路由组件，并使用 `<router-link>` 来创建导航链接。
```html
<!-- App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
```
这样，你的 Vue 3 项目就已经配置好了基本的路由。你可以通过 `<router-link>` 组件导航到不同的路由，并通过 `<router-view>` 显示对应的组件。
记得在创建新页面时，需要在 `router/index.js` 文件中添加新的路由定义，并创建对应的 Vue 组件文件。