路由指南：从入门到实战优化

在开发单页应用（SPA）时，Vue Router 是必不可少的工具。它让我们能够在不刷新页面的情况下切换视图。今天我们就来根据学习笔记，系统地梳理一下 Vue Router 的核心用法，从基础跳转到参数传递，再到性能优化。

一、 为什么不用 a 标签？（声明式导航）

在 Vue 中，我们通常不推荐使用原生的 <a href="..."> 标签进行跳转。

1. 刷新问题：a 标签会导致页面刷新，丧失 SPA 的体验。
2. 样式管理：我们需要手动处理“哪个链接是高亮状态”，非常繁琐。

解决方案：<router-link>

Vue Router 提供了一个全局组件 <router-link>：

• 无刷新跳转：本质还是 a 标签，但拦截了点击事件。
• 自动高亮：它会自动给当前匹配的链接添加 CSS 类名。

<router-link to="/home">首页</router-link>

高亮原理

当路由激活时，Vue 会自动添加两个类名：

1. router-link-active (模糊匹配)：最常用。比如 /my 会点亮，/my/order 也会点亮它。
2. router-link-exact-active (精确匹配)：只有路径完全一致（例如就是 /my）时才点亮。

小技巧：觉得类名太长？可以在 new VueRouter 时通过 linkActiveClass 配置项自定义类名。

---

二、 JS 代码怎么跳？（编程式导航）

有时候我们需要在逻辑执行完（比如登录成功、搜索表单提交）后跳转，这时就不能用 HTML 标签，而要用 JS。

1. path 路径跳转（简单直接）

适合短路径，但不能配合 params 对象传参。

// 简单写法
this.$router.push('/home')

// 带查询参数 /home?id=1
this.$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: '/:pathMatch(.*)*', component: NotFound }

3. 路由模式

• Hash (默认)：URL 带 #，兼容性好。
• History：URL 正常（无 #），需要后端配置支持，否则刷新会 404。

---

五、 进阶：嵌套路由 (Children)

当页面中只有局部内容需要切换（例如：首页底部 TabBar 不变，中间内容变），就要用嵌套路由。

1. 配置：在父路由中使用 children 数组。
2. 出口：在父组件 .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 应用更加丝滑。