Vue.js Кнопка push и back

Question

У меня есть список элементов в шаблоне Vue.js. Пользователь начинается с «/ list», который представляет собой список элементов. Когда элемент кликается, я использую $ router.push, чтобы отправить пользователя на маршрут. Маршрут я отправить пользователю это:

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

Я делаю это, так что пользователь не должен когда-либо быть на '/ предметы/[theItemId]. Это работает прекрасно, однако, когда пользователь нажимает кнопку, они принимаются к маршруту:

/items/[theItemId] 

вместо этого я хочу, чтобы пользователь должен быть направлен обратно в основной список.

'/list' 

Это возможно?

Благодаря

Answer 1

Я думаю, что вы используете $router.push в created или mounted крючок компонента маршрута для /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, с той лишь разницей, что он n avigates, не нажимая новую запись истории, как следует из названия, она заменяет текущую запись.

Если вы используете $router.replace, ваш стек истории теперь будет:

/list >>/items/:itemID/Property1

Теперь, если вы нажмете на кнопку назад, вы будете в конечном итоге в /list.