Vue 2 路由指南：从入门到实战优化
Vue 2 路由指南：从入门到实战优化
在开发单页应用（SPA）时，Vue Router 是必不可少的工具。它让我们能够在不刷新页面的情况下切换视图。今天我们就来根据学习笔记，系统地梳理一下 Vue Router 的核心用法，从基础跳转到参数传递，再到性能优化。
一、 为什么不用 a 标签？（声明式导航）
在 Vue 中，我们通常不推荐使用原生的<a href="...">标签进行跳转。
- 刷新问题：a 标签会导致页面刷新，丧失 SPA 的体验。
- 样式管理：我们需要手动处理“哪个链接是高亮状态”，非常繁琐。
解决方案：<router-link>
Vue Router 提供了一个全局组件<router-link>：
- 无刷新跳转：本质还是 a 标签，但拦截了点击事件。
- 自动高亮：它会自动给当前匹配的链接添加 CSS 类名。
<router-linkto="/home">首页</router-link>高亮原理
当路由激活时，Vue 会自动添加两个类名：
router-link-active(模糊匹配)：最常用。比如/my会点亮，/my/order也会点亮它。router-link-exact-active(精确匹配)：只有路径完全一致（例如就是/my）时才点亮。
小技巧：觉得类名太长？可以在
new VueRouter时通过linkActiveClass配置项自定义类名。
二、 JS 代码怎么跳？（编程式导航）
有时候我们需要在逻辑执行完（比如登录成功、搜索表单提交）后跳转，这时就不能用 HTML 标签，而要用 JS。
1. path 路径跳转（简单直接）
适合短路径，但不能配合params对象传参。
// 简单写法this.$router.push('/home')// 带查询参数 /home?id=1this.$router.push('/home?id=1')2. name 命名路由跳转（推荐长路径）
适合路径很长或嵌套很深的场景，需要先在路由配置里给路由起个name。
// 路由配置： { path: '/user/profile/edit', name: 'UserEdit', ... }this.$router.push({name:'UserEdit'})三、 路由传参：Query vs Params
这是新手最容易晕的地方，记住这句口诀：Query 像 GET 请求带问号，Params 像 动态路径。
1. 查询参数 (Query)
- 表现：URL 长这样
/detail?id=10&name=vue - 适用：多个参数，非核心数据。
- 传递：
this.$router.push({path:'/detail',query:{id:10}}) - 接收：
this.$route.query.id
2. 动态路由 (Params)
- 表现：URL 长这样
/detail/10 - 适用：优雅、核心参数（如文章ID）。
- 前提：必须先配置路由规则
path: '/detail/:id'。 - 传递：
// 方式1：拼字符串this.$router.push('/detail/10')// 方式2：用 name (注意：不能用 path 配合 params 对象！)this.$router.push({name:'Detail',params:{id:10}}) - 接收：
this.$route.params.id
四、 路由配置三剑客
1. 重定向 (Redirect)
解决用户访问根路径/时白屏的问题。
{path:'/',redirect:'/home'}2. 404 页面
利用通配符*，一定要放在路由数组的最后面。
{path:'*',component:NotFound}3. 路由模式
- Hash (默认)：URL 带
#，兼容性好。 - History：URL 正常（无
#），需要后端配置支持，否则刷新会 404。
五、 进阶：嵌套路由 (Children)
当页面中只有局部内容需要切换（例如：首页底部 TabBar 不变，中间内容变），就要用嵌套路由。
- 配置：在父路由中使用
children数组。 - 出口：在父组件
.vue文件中放置<router-view>。
// router/index.js{path:'/home',component:Layout,children:[{path:'article',component:Article},// 注意：二级路由路径不要加 /{path:'user',component:User}]}六、 性能优化：Keep-Alive（了解）
场景：用户从“文章列表”点进“详情页”，再返回“列表页”时，列表页的数据会重新刷新，滚动条也会回到顶部。这体验不好。
原因：路由切换默认会销毁旧组件，创建新组件。
解决：使用 Vue 内置组件<keep-alive>包裹路由出口，缓存组件实例。
<keep-alive:include="['LayoutPage']"><router-view></router-view></keep-alive>生命周期变化：
组件被缓存后，created和mounted只会执行一次。如果需要每次进入页面都执行逻辑，请使用：
- activated：组件激活（进入）时触发。
- deactivated：组件失活（离开）时触发。
总结
Vue Router 的核心在于理解声明式与编程式导航的区别，以及熟练掌握Query和Params的传参方式。在实际项目中，合理使用嵌套路由构建布局，并利用Keep-Alive优化用户体验，能让我们的 SPA 应用更加丝滑。