Vue.js Push 和后退按钮

Question

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

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

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

/items/[theItemId]

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

'/list'

这是可能的吗？

谢谢

Answer 1

我认为您$router.push在路由组件的createdormounted钩子中使用了/items/: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（位置）

它的作用就像router.push，唯一的区别是它在导航时不会推送新的历史条目，正如其名称所暗示的那样 - 它替换了当前条目。

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

/list >> /items/:itemID/Property1

现在，如果您按下后退按钮，您最终将进入/list.