Vue Router 导航解密：replace还是 push

满分观察网友z

于 2025-06-13 09:50:14 发布

阅读量606

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/dongxiaod1/article/details/148536433

Vue 专栏收录该内容

20 篇文章

订阅专栏

Vue Router 导航解密：`replace` 还是 `push`？告别混乱的浏览器历史！🚀

哈喽，各位 Vue 开发者！👋

你是否曾有过这样的体验：在一个 Web 应用里一顿操作，心满意足地想点浏览器“返回”按钮回到上一步，结果“唰”的一下，直接被踢回了应用的入口，甚至是百度首页？

或者，在登录一个网站后，你点击返回，竟然又看到了刚才的登录页面？🤦‍♂️

别担心，这不是 Bug，也不是什么灵异事件。这背后，其实是 Vue Router 导航模式在“作祟”。今天，我们就来彻底揭开 <router-link> 身上一个看似不起眼却威力巨大的属性——replace 的神秘面纱！

两种导航模式：留下足迹 vs 抹去痕迹

在 Vue Router 的世界里，当我们从一个页面跳转到另一个页面时，主要有两种模式：

push 模式 (默认)：这是我们最常用的方式。它就像是在走迷宫时留下一串面包屑。每当你访问一个新页面，它就会在浏览器的历史记录栈中添加一个新记录。当你点击返回时，浏览器会沿着你留下的面包屑原路返回。
replace 模式：这个模式就有点像个会“魔法”的特工了。它在导航时，不会添加新记录，而是直接用新的页面替换掉当前的历史记录。就像特工抹去了自己的足迹，不留下一丝痕迹。

听起来有点抽象？别急，我们直接上代码和实例，让你一眼看穿它们的区别！

实战演练：`push` 与 `replace` 的正面交锋 ⚔️

让我们用下面这个简单的 Demo 来感受一下。我们有三个页面：Home、About 和 Other。

<template>
  <div id="app">
    <h3>`replace` 属性示例 (导航历史记录测试):</h3>
  
    <!-- 默认的 Push 模式 -->
    <p>🍞 **Push 模式 (留下足迹):**</p>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/other">Other</router-link>

    <!-- 开启 Replace 模式 -->
    <p>🪄 **Replace 模式 (抹去痕迹):**</p>
    <router-link to="/" replace>Home (replace)</router-link> |
    <router-link to="/about" replace>About (replace)</router-link> |
    <router-link to="/other" replace>Other (replace)</router-link>
  
    <router-view />
  </div>
</template>

(为了聚焦核心，部分样式和说明框代码已省略)

现在，让我们分别操作这两组链接，看看会发生什么。

场景一：Push 模式 (默认)

依次点击：Home -> About -> Other。
你的浏览器历史记录栈会像这样：[..., Home, About, Other]。
点击浏览器返回按钮：你回到了 About 页面。
再次点击返回：你回到了 Home 页面。

一切都符合直觉，对吧？这就是 push 的工作方式，它忠实地记录了你的每一步。

场景二：Replace 模式

现在，好戏登场了！假设你是从 Google 搜索结果进入我们这个应用的。

依次点击：Home (replace) -> About (replace) -> Other (replace)。
你的浏览器历史记录栈发生了奇妙的变化：
- 初始状态：[Google]
- 点击 Home (replace)：[Google] 变成了 [Home]。（Home 替换了 Google 的位置）
- 点击 About (replace)：[Home] 变成了 [About]。（About 替换了 Home 的位置）
- 点击 Other (replace)：[About] 变成了 [Other]。（Other 替换了 About 的位置）
这时，你的历史记录栈实际上只有一个和你应用相关的记录：[Other]。
现在，点击浏览器返回按钮… 奇迹发生了！你直接回到了 Google！😱

因为 Other 页面是你历史记录中的最后一站，它的“前一站” 并不是 About 或 Home，而是你进入这个应用之前的页面。replace 让你的导航“不留后路”。

那么，我该在什么时候使用 `replace`？💡

replace 并非鸡肋，它在很多场景下都非常有用，甚至是最佳实践！

登录/注册流程：这是最经典的场景。当用户成功登录后，我们应该将他导航到主页或仪表盘。这时使用 replace 跳转，可以防止用户点击返回按钮又回到登录页面。
```
// 在登录成功的回调里
this.$router.replace('/dashboard');
```
OAuth 授权回调：当用户通过第三方（如 GitHub、Google）登录时，会被重定向到一个中间回调页面来处理授权码。这个页面通常是短暂存在的，我们不希望它出现在用户的历史记录里。处理完毕后，用 replace 跳转到最终页面是最好的选择。
404 页面：当用户访问一个不存在的 URL 时，我们会将他重定向到 404 页面。使用 replace 可以避免那个错误的 URL 留在历史记录中。
一次性的操作页面：比如一个支付成功后的“感谢”页面，或者一个表单提交后的“成功”提示页。这些页面通常不需要用户返回，使用 replace 可以优化导航体验。