Vue.js 푸시 버튼과 뒤로 버튼

Question

Vue.js 템플릿에 항목 목록이 있습니다. 사용자는 항목 목록 인 '/ list'에서 시작합니다. 항목을 클릭하면 $ router.push를 사용하여 사용자를 경로로 보냅니다. I가 사용자에게 전송 경로는 다음과 같습니다

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

내가 그렇게 사용자가 지금까지 '/ 아이템/[theItemId]'에 있지 않고이 작업을 수행. 이것은 사용자가 다시 버튼을 칠 때 그러나, 그들은 경로로 이동하는 큰 노력 : 나는 대신에 사용자가 다시 메인리스트로 이동하려는

/items/[theItemId] 

.

'/list' 

이 작업을 수행 할 수 있습니까?

덕분에

Answer 1

나는 당신이 /items/:itemID에 대한 경로 구성 요소의 created 또는 mounted 후크 $router.push을 사용하는 것 같아요.

$router.push을 사용하면 기록 스택의 새 항목이 만들어집니다. 다음과 같이 그래서 역사 스택은 지금 보이는 : 뒷면 버튼은 일반적으로 히스토리 스택에서 이전 항목으로 이동으로 예상대로, 그것은 /items/:itemID로 이동합니다

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

. 여기에 설명 된대로

이 문제를 방지하려면, 당신은 $router.replace 대신 $router.push로 사용할 수 있습니다 :

router.replace (위치)

: 위의 페이지에서 인용

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

router.push처럼 작동하지만, 유일한 차이점은 n 그 이름에서 알 수 있듯이 새로운 기록 항목을 누르지 않고도 탐색 할 수 있습니다. 현재 항목을 대체합니다.

는 $router.replace를 사용하는 경우

, 당신의 역사 스택은 지금 될 것입니다 :

는

/list >>/items/:itemID/Property1

은 이제 다시 버튼을 누르면, 당신은 /list에 종료됩니다.