2017-01-09 132 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結束。