vite创建vue3项目路由

### 配置 Vite 和 Vue3 的路由

为了在基于 Vite 构建工具的 Vue3 项目中配置路由，需遵循特定步骤来确保项目的模块化和可维护性。首先，在 `src` 文件夹内创建名为 `router` 或者 `routes` 的文件夹用于存放路由逻辑[^2]。

#### 创建路由入口文件

在 `src/routes/` 下建立一个名为 `index.ts` 的文件作为路由配置的核心位置：

// src/routes/index.ts
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

此段代码定义了一个简单的路由器实例并导出以便其他部分引入使用[^1]。

#### 修改主应用文件以集成新创建的路由系统

打开位于 `src/main.ts` 中的应用启动脚本，并调整其内容如下所示：

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './routes' // 导入刚刚创建好的路由对象

createApp(App).use(router).mount('#app')

通过上述操作完成了基本路由功能的添加工作；现在可以根据实际需求进一步扩展这些基础结构——比如实现更复杂的导航控制、参数传递等功能特性。