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

Question

[Артем Прохоров]

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.

Comments

[Lord_Dantes]

Вы про то что компонент не рендерится когда ссылка меняется?
Если да то вставьте вашу функцию в 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

[Константин Б.]

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

Comments

[Артем Прохоров]

.catch({}) лишь уберет ошибку из консоли, но самого перехода не будет.

[Константин Б.]

kotcich, у меня этот хак всегда работает. Значит у вас в чем-то другом дело. Был бы весь код подсказал бы\

Answer 2

[Evgeny Kulakov]

Вообще надо проверить, что props: true стоит для данного маршрута и добавить для данного компонента соответствующее свойство в props и должно работать вроде. Еще нужно учитывать, что уже находясь на данном маршруте, хуки жизненного цикла компонента не будут вызываться, поэтому если в них что-то есть нужно эту логику в watch переносить или генерировать уникальный key для компонента, чтобы вызывать принудительную перерисовку.

Comments

[Артем Прохоров]

А вы можете кинуть ссылку/и, где показано как это делать, именно генерация уникального ключа для каждой url в истории?|
И да, само собой props: true у меня стоит.

[Evgeny Kulakov]

Ссылок нет) но базово вью определяет уникальность объекта на основе ключа и его изменение вызывает перерендер. Но вам оно не надо вроде, просто сделайте слежение за проперти s и вызывайте логику обновления компонента:

props: {
  s: {
     type: Number,
     default: 10
  }
},
watch: {
  s(val) {
     // update data 
  }
}

[Evgeny Kulakov]

Так, стоп) если нужно, чтобы и браузерная история переходов работала учитывая этот параметр, то в любом случае нужно каким-то образом сохранять в путь, как один из query параметров например.

[Артем Прохоров]

Evgeny Kulakov, Вот это как раз и нужно...
Но как бы если я не пишу в пути параметр, но передаю его в params, то я его могу получить, неужели vue никак не запоминает параметры передающиеся без url?

[Константин Б.]

kotcich, неужели)) Ахаааззаа)) Как буд-то в остальных фреймворках это ненжный кейс имеется.

[Evgeny Kulakov]

kotcich, мм, ну вы когда делаете навигацию в браузере вью тут не при чем.