首页vite+vue3项目配置router

vite+vue3项目配置router

时间: 2025-07-06 17:47:01 浏览: 6

### 配置 Vite 和 Vue3 项目中的 Vue Router #### 创建路由模块在项目根目录下建立 `router` 文件夹，在该文件夹内创建名为 `index.js` 的文件。此操作旨在分离路由逻辑，使应用结构更加清晰[^1]。 ```javascript // router/index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }) export default router ``` 上述代码展示了如何初始化一个简单的路由器实例并导出以便其他部分使用。这里指定了基础路径为当前环境变量定义的 `BASE_URL`，这有助于支持不同部署场景下的相对链接处理。 #### 主程序入口修改为了使得新创建的路由生效，需调整应用程序的主要入口文件——通常是位于 `src/main.js` 或者 `main.ts` 中的内容： ```javascript // src/main.js or main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' // 导入刚刚创建好的路由对象 createApp(App).use(router).mount('#app') ``` 通过 `.use()` 方法注册之前构建完成的路由管理器到 Vue 实例上，从而让整个单页应用能够响应 URL 变化而动态加载相应的视图组件。 #### 安装依赖包确保已安装必要的库来支持以上配置工作。对于基于 Vite 构建工具链的新版 Vue 应用来说，可以通过 npm 或 yarn 来获取最新版本的 `vue-router`: ```bash npm install vue-router@next # 或者 yarn add vue-router@next ``` 这样可以保证所使用的 API 版本是最新的，并且兼容 Vue 3.x 系列框架特性[^2]。

阅读全文