检查使用vue-router时是否可以前进答案

【问题标题】：Check if it's possible to go forward when using vue-router检查使用vue-router时是否可以前进
【发布时间】：2017-02-09 12:41:58
【问题描述】：

我正在使用 Vue2 和 Vue-router（版本 ^2.2.0）开发一个应用程序，并且后退和前进导航按钮必须显示用户是否可以后退/前进。

要检查用户是否可以返回，很简单：如果用户不在主屏幕，他可以。

在检查用户是否可以前进时出现问题，因为我需要检查路由器的历史记录，但我无法这样做。

有没有办法检查路由器是否有“调用 router.go(1) 时可以去的地方”？

【问题讨论】：

在 vue-router v2.2.0 的最新版本中，onComplete 和 onAbort 回调函数是 router.push 方法的第二个和第三个参数：router.push(location, onComplete, onAbort)。我不是 100% 确定这会起作用，但你可以尝试使用这些回调..
这行不通，因为我也需要 router.go 中的那些回调。

【解决方案1】：

网络应用程序？ router.go(n) 是 history.go(n) 所以它的限制是一样的。将个人历史暴露给网站是不安全的。此外，仅仅因为他们在家并不意味着他们不能返回，仅仅因为用户可以前进并不意味着它会导航到您的应用程序中的某些内容。如果您尝试复制前进和后退按钮，您将会遇到麻烦。

如果它不是网络应用程序，那么您需要像浏览器一样手动跟踪用户历史记录并拼接替换和推送。

【讨论】：

它不是一个网络应用程序，它是一个适用于 Android、iOS、Windows 和 OSX 的混合应用程序。为什么以及我应该“拼接、替换和推送”到底是什么？
您需要保留一组历史记录，例如[ { path: '/foo', active: true|false } ]。当您转到不同的路径并将新条目设置为活动时，您会推送它。然后，当按下后退或前进按钮时，您需要在正确的方向上 router.replace(nextUrl) 并将 active 设置为 true 。但是，由于它只是一个应用程序，您可能不需要真正的后退/前进浏览器行为。你确定你不想像“后退/前进带你通过面包屑/层次结构”类型的情况吗？
现在后退按钮按预期工作：如果当前屏幕不是主屏幕，它只会调用 router.go(-1)。我没有在任何地方使用 router.replace 。您建议的方法是包装路由器并且从不调用 router.go 不是吗？
正确。 router.go 在history.go。你可以告诉它去哪里，但它不能告诉你它要去哪里，因为这会违反安全/隐私。

【解决方案2】：

您是否启用了 HTML5-history-mode 配置？可以在here 找到文档。

您可能还需要在服务器中启用它。如果您使用的是 express，我的服务器代码中有这一行：

app.use(require('connect-history-api-fallback')());

【讨论】：