在 Vue Router 中，路由跳转（也称为编程式导航）是指通过 JavaScript 代码而非用户点击 <router-link> 来实现页面的导航。这是构建动态、交互式应用的关键。
核心原理
Vue Router 利用浏览器的 History API（如 pushState 和 replaceState）或 hash 模式来改变 URL 而不刷新整个页面。当 URL 变化时，Vue Router 会匹配对应的路由规则，并动态地将新的组件渲染到 <router-view> 中，从而实现 SPA（单页应用）的无缝切换。
主要跳转方式
Vue Router 提供了三种主要的编程式导航方法，都挂载在路由器实例 this.$router 上：
1. router.push(location, onComplete?, onAbort?)
- 作用：向历史记录栈添加一条新记录。用户点击“后退”按钮可以返回到上一个页面。
- 类比：类似于点击
<router-link :to="...">或原生浏览器的前进操作。 - 参数：
location：可以是字符串路径，也可以是描述地址的对象。onComplete(可选)：导航成功完成时的回调。onAbort(可选)：导航被中断（如被守卫阻止）时的回调。
2. router.replace(location, onComplete?, onAbort?)
- 作用：替换当前的历史记录。不会向栈中添加新记录，因此用户无法通过“后退”按钮返回到前一个页面。
- 类比：类似于原生的
window.location.replace()。 - 适用场景：登录后跳转到首页、404 页面等不需要用户能回退的场景。
3. router.go(n)
- 作用：在历史记录中前进或后退指定步数。类似
window.history.go(n)。 - 参数：
n：要前进或后退的步数。n = 1：前进一页。n = -1：后退一页。n = 0：刷新当前页（某些浏览器支持）。
其他跳转方式
除了编程式导航，还有两种常见的跳转方式：
1. 声明式导航：<router-link>
- 作用：通过模板中的标签进行导航，是
router.push的声明式写法。
2. 直接修改 window.location
- 作用：强制刷新页面并跳转到新地址。
- 示例：
javascript window.location.href = '/external-page' - 区别：这会完全刷新页面，破坏 SPA 的体验，通常用于跳转到外部链接或需要强制刷新的场景。
总结
| 方法 | 行为 | 是否新增历史记录 | 典型场景 |
|---|---|---|---|
router.push | 添加新记录 | ✅ 是 | 普通页面跳转 |
router.replace | 替换当前记录 | ❌ 否 | 登录后跳转、错误页 |
router.go(n) | 前进/后退 n 步 | N/A | 实现自定义的前进后退按钮 |
<router-link> | 声明式 push | ✅ 是 | 模板中的链接 |
location.href | 强制刷新跳转 | N/A | 外部链接 |
核心建议：在 Vue SPA 内部导航时，优先使用 router.push 和 <router-link>。router.replace 用于不需要用户回退的场景。避免使用 location.href 除非必要。
THE END
