2017-01-09 81 views
0

我有一个Vue.js模板中的项目列表。用户从'/ list'开始,这是一个项目列表。点击某个项目时,我使用$ router.push将用户发送到路由。我的用户发送到路线为:Vue.js Push和后退按钮

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

我这样做,所以用户不必永远是在“/项目/ [theItemId]”。这是伟大的工作,但是当用户点击返回按钮,他们被带到路线:

/items/[theItemId] 

我反而希望用户被定向回主列表。

'/list' 

这可能吗?

感谢

+0

除了这个,还有更多的故事。除非你去了那里,点击另一个链接,然后点击后退按钮,否则没有理由使用后退按钮去'/ items/[theItemId]'。 –

+0

我在下面输入了一个答案(太长的评论),假设有几件事。如果我的假设不正确(关于安装钩子中的程序化导航),请提供更多信息,以便我们了解正在发生的事情。 – Mani

+0

对不起,如果我不清楚我的原始问题。玛尼的回答正是我所需要的。 – Dave

回答

3

我认为你是在你的路线成分为/items/:itemIDcreatedmounted钩使用$router.push

当您使用$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,唯一的区别是它n正如其名称所暗示的那样,不需要推送新的历史记录即可进行冒险 - 它将取代当前的条目。

如果使用$router.replace,你的历史堆栈现在是:

/list >>/items/:itemID/Property1

现在,如果你点击后退按钮,您将在/list结束。