Vue-router：如何在历史堆栈中返回两条相同的路线答案

【问题标题】：Vue-router: How to go back two same routes in history stackVue-router：如何在历史堆栈中返回两条相同的路线
【发布时间】：2020-12-28 08:36:14
【问题描述】：

我正在使用 Vue 2.x。

有一个帖子页面。当我单击帖子页面中的按钮时，我会转到编辑页面。当我点击编辑页面上的提交时，我使用this.$route.replace(link_to_post_page)从历史堆栈中删除编辑页面，并推送帖子页面。

所以现在我的历史堆栈中有两条相同的路线（帖子页面）。

问题是，当我点击浏览器的后退按钮时，我转到了同一个页面，也就是帖子页面。对于用户来说，这是一个非常不自然的页面流，我想修复它。

我研究了 6 个小时来解决这个问题，但我没有找到解决方案。

我的第一次尝试是使用 Navigation Guards。但是 Navigation Guards 仅在路线更改时才起作用。就我而言，路线不会改变。

我也尝试使用 window.history.onPopState 事件侦听器，但也失败了，因为在使用 window.history.onPopState 时我无法操纵路由。

非常感谢您的帮助。谢谢。

附： Stack Overflow 上最相似的问题是 vue-router: skip page when using browser back button，但它根本没有回答我的问题。我检查了其他问题，但他们也没有回答我的问题。

【问题讨论】：

【解决方案1】：

为什么不回到历史而不是推新的/edit 路由？

这样做的缺点是用户仍然可以手动前进到/edit 页面。
但是如果他们进入另一个页面，它将覆盖接下来的步骤（堆栈上的/edit 路由）

【讨论】：

我需要完善网站，所以编辑后不应该转到/edit页面。所以，是的，缺点是相当显着的。
我明白了。但是我没有找到任何完美的解决方案......如果您不希望路由器考虑它，您可以尝试不将/edit 页面设为真实页面。（改用查询参数？）。或者您将当前的/post 替换为/edit，然后再次将/edit 替换为/post。我猜那个双重替换会达到你想要的（但仍然有缺点）。
是的，似乎没有完美的解决方案。但是您使 /edit 不是真实页面的想法似乎是个好主意，我可以从中得到答案。