vue3+vite项目中路由配置

在Vue3 + Vite项目中，您可以使用Vue Router进行路由配置。以下是在Vue3 + Vite项目中使用Vue Router进行路由配置的步骤：

1. 安装Vue Router

在项目中使用npm或yarn安装Vue Router：

npm install vue-router@4

或

yarn add vue-router@4

2. 创建路由

在项目中创建一个路由文件，例如`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

在上面的示例中，我们创建了两个路由：Home和About。每个路由都包含一个路径、名称和组件。您可以根据自己的需求添加或删除路由。

3. 在应用程序中使用路由

在您的应用程序中，您需要将路由器实例导入并将其添加到Vue实例中。以下是一个简单的示例：

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

const app = createApp(App)

app.use(router)

app.mount('#app')

在上面的示例中，我们将路由器实例作为插件添加到Vue实例中，并将其挂载到应用程序的根元素（`#app`）上。

4. 创建路由链接

在您的应用程序中，您可以使用`router-link`组件创建路由链接。以下是一个简单的示例：

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

在上面的示例中，我们使用`router-link`组件创建了两个路由链接。每个链接都包含一个`to`属性，该属性指定链接的目标路由。

通过这些步骤，您可以在Vue3 + Vite项目中成功配置路由。