Vue.js推和后退按钮

Question

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

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

我是这样做的，所以用户不必一直在＆＃39; /项目/ [theItemId]＆＃39 ;.这很有效，但是当用户按下后退按钮时，它们将被带到路线：

/items/[theItemId]

我希望将用户定向回主列表。

'/list'

这可能吗？

谢谢

Answer 1

我认为您在$router.push的路径组件的created或mounted挂钩中使用了/items/:itemID。

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

/list＆gt;＆gt; /items/:itemID＆gt;＆gt; /items/:itemID/Property1

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

为避免这种情况，您可以使用$router.replace代替$router.push，如下所示：

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

从上面的页面引用：

  

<强> router.replace（位置）

     

它的作用类似于router.push，唯一的区别是它在不推送新历史记录条目的情况下导航，顾名思义 - 它取代了当前条目。

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

/list＆gt;＆gt; /items/:itemID/Property1

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