更改导航器在 vue-routing 上的返回行为不适用于 url 但视图正常

Question

我正在做一个 vue.js/vue-router 项目（vue 3，vue-router 4）。在这个项目中，我有一个幻灯片面板，您可以从不同的视图中触发它。在这个滑动面板上，有一个“关闭”按钮可以关闭它。

为了改善面板打开时的移动体验，我想在您点击导航器的上一个按钮时关闭面板，而不是返回历史记录。

从现在开始，我已经用 router.beforeEach 尝试了一些事情，并且我接近找到类似这样的解决方案：

router.beforeEach(async (to, from) => {
  if(panel_is_visible) {
    // if the panel is visible, close it and do not go to the "to" view
    functionToCloseThePanel()
    return { from };
  }
})

使用这段代码，行为几乎是好的：点击导航器的上一个按钮后，视图是“来自”视图，但 url 是“来自”视图之前的视图...好像“后退按钮”仍然改变 url，但应用程序显示正确的视图。

当我在 return 语句中准确地写下我想要的视图的名称时，它起作用了（url ok 和 view ok）。但是使用“from”变量并没有像我预期的那样完全工作（url 不是并且查看正常）。

你有什么线索吗？

Answer 1

我找到了解决方案，我只需要按照此处的说明执行 return false;：https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

router.beforeEach(async (to, from) => {
  if(panel_is_visible) {
    // if the panel is visible, close it and do not go to the "to" view
    functionToCloseThePanel()
    return false;
  }
})

更改导航器在 vue-routing 上的返回行为不适用于 url 但视图正常

Change navigator back behavior on vue-routing not working for the url but ok for the view

javascript

vue.js

vue-router