2017-02-09 205 views
0

我正在使用Vue2和Vue-router(版本^ 2.2.0)开发应用程序,并且后退和前进导航按钮必须显示用户是否可以返回/转发还是不转发。检查使用vue-router时是否可以前进

要检查用户是否可以返回它很简单:如果用户不在主屏幕上,他可以。

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

有没有办法来检查路由器是否有“要去router.go(1)时去的地方”?

+0

在vue-router v2.2.0最新版本中,路由器的onComplete和onAbort回调函数.push'方法,作为第二个和第三个参数: 'router.push(location,onComplete,onAbort)'。我不是100%肯定这会工作,但你可以尝试使用这些回调.. –

+0

这将无法正常工作,因为我也需要在router.go这些回调。 – Potray

回答

0

Web应用程序? router.go(n)history.go(n),所以它与此相同。将个人历史暴露给网站是不安全的。此外,仅仅因为他们在家里并不意味着他们不能回去,仅仅因为用户可以前进并不意味着它会导航到您的应用中的某些东西。如果您试图复制向前和向后按钮,您将会遇到不愉快的时间。

如果它不是一个web应用程序,那么你需要手动跟踪用户的历史和拼接,并像浏览器一样进行替换和推送。

+0

这不是一个网络应用程序,它是Android,iOS,Windows和OSX的混合应用程序。为什么我应该“拼接并替换并推送”? – Potray

+0

你需要保存一个历史数组,如'[{path:'/ foo',active:true | false}]'。当您前往不同的路径并将新条目设置为活动状态时,您会推送它。然后,当按下后退或前进按钮时,您需要沿着正确的方向'router.replace(nextUrl)'并将其设置为true。但是,由于它只是一个应用程序,您可能不想要真正的后退/前进浏览器行为。你确定你不想更像“后退/前进带你通过面包屑/层次结构”类型的情况。 –

+0

现在后退按钮按预期工作:如果当前屏幕不是主屏幕,它只会调用router.go(-1)。我没有在任何地方使用router.replace。你建议的方法是包装路由器,不要调用router.go不是吗? – Potray

0

您是否启用了HTML5历史模式配置?文档可以找到here

您可能还需要在您的服务器中启用它。如果您使用快递,我的服务器代码中包含以下行:

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

我启用了HTML5历史记录模式,但AFAIK不允许我在调用router.go(1)时检查是否存在路由。 – Potray

相关问题