Как сделать route.push на ту же страницу, но с изменением параметров?

Question

Артем Прохоров @kotcich

Я скучный.

Vue.js

Как сделать route.push на ту же страницу, но с изменением параметров?

localhost:8080/menu/1 это моя ссылка

1 это параметр p отвечающий за номер страницы, но так же в ней есть параметр s отвечающий за per-page для rest api.
Я не хочу выводить в ссылке все числа для фильтрации и пагинации(ведь их может быть и больше).
Поэтому я параметр s тупо не вывожу, а хочу его менять в коде незримо для клиента.
Но в этом случаи
this.$route.params.s = new value
меняет значение (консоль логом проверял до и после), но вот router.push не воспринимает ссылку как новую, вот как я это пишу:

this.$route.params.s = new value;
this.$router.push({ name: 'menu', params: { s: this.$route.params.s, p: nextPage }});

Можно ли vue routing заставить понять, что это новая ссылка или он воспринимает только то, что непосредственно написанно в URL?

И еще одна причина по которой мне нужно это, сделать возможность перемещения по страницы через кнопки браузера (стрелочки), так как многие юзеры просто привыкли их кликать, соответсвенно хочу на 2 стула сесть, и URL красивой сделать, и сделать router.push.

Вопрос задан более трёх лет назад
795 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Lord_Dantes @Lord_Dantes
Вы про то что компонент не рендерится когда ссылка меняется?
Если да то вставьте вашу функцию в watch:

watch: { '$route.params.slug': { immediate: true, handler() { // function here } } },
Написано более трёх лет назад
Артем Прохоров @kotcich Автор вопроса

Lord_Dantes, Ну я скопировал ваш код, но не помогло, на всякий случай заново повторю.
Про watch: я знаю, мне нужно чтобы находясь на
localhost:8080/menu/1 (с не отображающимся параметром s равным допустим 3)
я переходил на тот же
localhost:8080/menu/1 (где перед переходом я буду менять параметр s с 3 на 10 допустим, но URL та же)

Написано более трёх лет назад

Вы про то что компонент не рендерится когда ссылка меняется?
Если да то вставьте вашу функцию в watch:

watch: { '$route.params.slug': { immediate: true, handler() { // function here } } },
Lord_Dantes, Ну я скопировал ваш код, но не помогло, на всякий случай заново повторю.
Про watch: я знаю, мне нужно чтобы находясь на
localhost:8080/menu/1 (с не отображающимся параметром s равным допустим 3)
я переходил на тот же
localhost:8080/menu/1 (где перед переходом я буду менять параметр s с 3 на 10 допустим, но URL та же)

Answer 1 · 2021-06-07 15:02:08

Не получтся прятать параметры и удачненько ходить по страницам. А вот чтобы Vue не ругался на то что вы пытаетесь перейти по тому же адресу добавьте .catch({}) после push

Как сделать route.push на ту же страницу, но с изменением параметров?

Войдите на сайт