vue2 vue-router

Vue Router 是 Vue.js 官方的路由管理器，与 Vue.js 核心深度集成，能让构建单页面应用（SPA）变得简单直观，提供嵌套路由、路由参数、查询、通配符等功能，以及视图映射、导航守卫等高级功能，可帮助开发者构建复杂的路由逻辑[^2]。 ### 使用教程 #### 项目基础 在 Vue2 的项目中使用 vue-router，可在已有项目基础上增加使用，例如承接使用 axios 的项目进行拓展[^1]。 #### 安装配置 首先要修改 router 文件夹下的 index.js 文件，示例代码如下： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; // 引入组件 import TestA from '@/views/routerView/TestA.vue'; import TestB from '@/views/routerView/TestB.vue'; Vue.use(VueRouter) const routes=[ // 配置路由信息 { path:'/TestA/:id',// 使用 :id 作为路径参数 name:'TestA', component:TestA }, { path:'/TestB', name:'TestB', component:TestB }, ] const router = new VueRouter({ mode: 'history', // 可以选择 'hash' 或 'history' 模式 routes }); export default router ``` 上述代码中，先引入 Vue 和 VueRouter 以及所需组件，通过 `Vue.use(VueRouter)` 使用路由插件，接着配置路由信息，定义不同路径对应的组件，最后创建路由实例并导出[^3]。 #### 传参示例 在代码中可以通过按钮点击事件进行路径传参，示例代码如下： ```vue <template> <button @click="sendParams1">路径传参</button> </template> <script> export default { methods: { sendParams1() { this.$router.push({name:'TestA',params:{id:111}}) } } } </script> ``` 这里通过 `this.$router.push` 方法并传入包含路由名称和参数的对象来实现路径传参[^3]。 #### 路由渲染 在 `/src` 文件夹下新增 App2.vue 组件，使用 `router-view` 标签使路由能渲染在上面，示例代码如下： ```vue <template> <router-view /> </template> <script setup> </script> <style> </style> ``` 只有定义了 `router-view` 标签，路由才能正常渲染[^4]。 ### 模式区别 history 模式与 hash 模式的区别，可以粗略地记为：history 模式的 URL 更美观，像正常的网页 URL，但需要服务器端进行相应配置；hash 模式的 URL 中会带有 `#` 符号，兼容性较好，且不需要服务器端特殊配置[^4]。