vue3 js vite路由配置

在Vue 3 中，结合Vite这个高性能的前端构建工具，路由配置通常通过Vue Router进行。以下是基本的Vite + Vue Router 的配置步骤：

1. **安装依赖**:
首先需要安装`@vue-router/core` 和 `vue-router` 或者在Vite的`package.json`中添加`vite-plugin-vue-router`插件。

   npm install @vue/router --save
   // 或者使用vite的插件
   npm install vite-plugin-vue-router

2. **创建路由器实例**:
在`src/main.js`或`vite.config.ts`中引入并创建Vue Router实例，设置基础路径和模式通常是hash模式或history模式。

   import { createRouter, createWebHistory } from '@vue-router';
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes: [
       // 路由配置列表
     ]
   });

3. **定义路由**:
在`src/router`文件夹下创建路由配置文件，如`index.vue`中定义路由组件，可以有嵌套路由、动态路由等。

   {
     path: '/',
     component: () => import('./Home.vue'),
     children: [
       { path: 'about', component: About },
     ],
   }

4. **导航守卫** (optional):
可以使用全局守卫（如`router.beforeEach`）或局部守卫（如`beforeEnter`）控制路由的切换。

5. **在组件中使用路由**:
使用`<router-view>`标签显示当前路由对应的组件，而`<router-link>`用于导航到其他路由。

6. **启动应用**:
完成上述配置后，运行`npm run dev`或`vite`命令启动Vite项目，访问`http://localhost:3000`查看路由效果。