javascript - Vue.js 推送和后退按钮

Question

我有一个 Vue.js 模板中的项目列表。用户从“/list”开始，这是一个项目列表。单击某个项目时，我使用 $router.push 将用户发送到路线。我将用户发送到的路线是:

$router.push('/items/[theItemId]/Property1');

我这样做是为了让用户不必一直在“/items/[theItemId]”上。这非常有效，但是当用户点击后退按钮时，他们会被带到以下路线:

/items/[theItemId]

我希望将用户引导回主列表。

'/list'

这可以做到吗？

谢谢

Answer 1

我认为您正在 /items/的路由组件的 created 或 mounted Hook 中使用 $router.push :itemID.

当您使用$router.push时，历史堆栈中会创建一个新项目。所以你的历史堆栈现在看起来如下:

/list >> /items/:itemID >> /items/:itemID/Property1

由于后退按钮通常会将您带到历史记录堆栈中的上一个条目，因此它会按预期将您带到 /items/:itemID。

为了避免这种情况，您可以使用 $router.replace 而不是 $router.push，如下所述:

https://router.vuejs.org/en/essentials/navigation.html

引自上面的页面:

router.replace(location)

It acts like router.push, the only difference is that it navigates without pushing a new history entry, as its name suggests - it replaces the current entry.

如果您使用$router.replace，您的历史堆栈现在将是:

/list >> /items/:itemID/Property1

现在，如果您点击后退按钮，您将进入 /list。