vue3+vite中router配置

在 Vue3+Vite 中配置路由，可以按照以下步骤进行操作：

1. 安装 Vue Router

在项目根目录下，运行以下命令来安装 Vue Router：

npm install vue-router@4

2. 创建路由实例

在 src 目录下创建一个 router 目录，然后在该目录下创建一个 index.js 文件。在该文件中，我们需要导入 Vue 和 Vue Router，并创建一个路由实例。

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他路由配置项
]

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

export default router

在以上代码中，我们通过 createRouter 函数创建了一个路由实例，并配置了路由的 history 和 routes。

3. 配置路由

在上一步中，我们已经创建了一个路由实例，并配置了路由的 history 和 routes。接下来，我们需要在 main.js 文件中将路由实例挂载到 Vue 实例中。

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. 创建路由组件

在 src/views 目录下，创建各个路由对应的组件。

例如，我们在路由配置中定义了 Home 组件，那么我们就需要在 src/views 目录下创建一个 Home.vue 文件。

5. 在模板中使用路由

在需要使用路由的组件的模板中，我们可以使用以下方式来定义路由链接和路由视图：

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

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

在以上代码中，我们使用 router-link 标签来定义路由链接，to 属性表示链接的目标路由路径。同时，我们使用 router-view 标签来定义路由视图，用于显示当前路由的组件内容。

到此为止，我们就完成了在 Vue3+Vite 中配置路由的全部步骤。