vite vue-router安装

### 如何在 Vite 项目中安装和配置 Vue Router #### 安装 Vue Router 对于基于 Vite 构建的 Vue 3 项目，可以使用包管理工具来安装 `vue-router` 版本 4。如果采用的是 pnpm，则可以在项目的根目录执行如下命令： ```bash pnpm add vue-router@4 ``` 而当选用 npm 或 yarn 进行依赖项管理时，相应的指令分别为： ```bash npm install vue-router -S ``` 或是 ```bash yarn add vue-router ``` 以上操作会将指定版本的 `vue-router` 添加至开发环境中的依赖列表里[^1][^2]。 #### 配置 Vue Router 完成安装之后，在 src 文件夹内创建名为 router.js (或 .ts 如果项目支持 TypeScript) 的新文件用于定义路由逻辑。下面是一个简单的例子展示如何设置几个基础路径： ```javascript 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; ``` 这段代码首先引入必要的函数以及页面组件，接着声明了一个包含两个条目的数组——每个对象代表一条独立的导航规则。最后通过调用 `createRouter()` 函数实例化路由器，并将其导出以便其他模块能够访问它[^4]。 #### 更新入口文件 main.js/main.ts 为了让整个应用程序都能识别新的路由机制，还需要调整应用的主要启动脚本 (`main.js`) 来注册刚刚建立好的路由器实例: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; // 创建Vue实例并挂载到DOM上 const app = createApp(App); app.use(router); app.mount('#app'); ``` 此部分工作主要是为了确保所有的视图都可以正常解析 URL 并显示对应的内容[^3]。 #### 修改 App.vue 组件结构 最后一步是在主组件 `App.vue` 中加入 `<RouterView>` 标签作为占位符，让其内部动态加载匹配当前地址栏所指向的具体子组件。同时也可以利用 `<RouterLink>` 提供链接跳转功能给用户交互界面。例如： ```html <template> <div id="app"> <!-- 导航菜单 --> <nav> <RouterLink to="/">首页</RouterLink> | <RouterLink to="/about">关于我们</RouterLink> </nav> <!-- 动态渲染区域 --> <RouterView /> <!-- 显示当前位置信息 --> <footer> 当前位置：<span>{{ $route.path }}</span> </footer> </div> </template> <script setup></script> <style scoped></style> ``` 上述模板片段展示了怎样把静态 HTML 结构转换成具有响应式的单页应用布局形式[^5]。