Вот пример в документации:
// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
Ссылка: https://router.vuejs.org/en/essentials/navigation.html
Как упоминалось в этих документах, router.replace
работает какrouter.push
Итак, вы, кажется, правильно поняли этот пример кода. Но я думаю, что вам может потребоваться включить параметр или name
или path
, чтобы у маршрутизатора был какой-то маршрут для перехода. Без name
или path
это не выглядит очень значимым.
Это мое текущее понимание сейчас:
query
не является обязательным для маршрутизатора - некоторая дополнительная информация для компонента для создания представления
name
или path
обязательно - он решает, какой компонент показывать в вашем <router-view>
.
Возможно, этого не хватает в вашем примере кода.
РЕДАКТИРОВАТЬ: дополнительные сведения после комментариев
Вы пробовали использовать в этом случае именованные маршруты ? У вас есть динамические маршруты, и проще предоставить параметры и запрос отдельно:
routes: [
{ name: 'user-view', path: '/user/:id', component: UserView },
// other routes
]
а затем в ваших методах:
this.$router.replace({ name: "user-view", params: {id:"123"}, query: {q1: "q1"} })
Технически нет никакой разницы между указанными выше и this.$router.replace({path: "/user/123", query:{q1: "q1"}})
, но проще предоставить динамические параметры для именованных маршрутов, чем составлять строку маршрута. Но в любом случае следует учитывать параметры запроса. В любом случае я не смог найти ничего плохого в том, как обрабатываются параметры запроса.
После того, как вы войдете в маршрут, вы можете получить свои динамические параметры как this.$route.params.id
и параметры запроса как this.$route.query.q1
.
Не перезагружая страницу или не обновляя дом,
history.pushState
можно выполнить эту работу.Добавьте этот метод в свой компонент или где-нибудь еще, чтобы сделать это:
Итак, в любом месте вашего компонента вызовите,
addParamsToLocation({foo: 'bar'})
чтобы отправить текущее местоположение с параметрами запроса в стеке window.history.Чтобы добавить параметры запроса в текущее местоположение, не добавляя новую запись в истории , используйте
history.replaceState
вместо этого.Протестировано с Vue 2.6.10 и Nuxt 2.8.1.
Будьте осторожны с этим методом!
Vue Router не знает, что URL-адрес изменился, поэтому он не отражает URL-адрес после pushState.
источник
На самом деле вы можете просто отправить запрос следующим образом:
this.$router.push({query: {plan: 'private'}})
По материалам: https://github.com/vuejs/vue-router/issues/1631
источник
источник
Error: Avoided redundant navigation to current location
this.$router.push({ query: Object.assign({...this.$route.query}, { new: 'param' }) })
this.$router.push({ query: {...this.$route.query,new: 'param'},) })
Для добавления нескольких параметров запроса это сработало для меня (отсюда https://forum.vuejs.org/t/vue-router-programmatically-append-to-querystring/3655/5 ).
источник
Если вы пытаетесь сохранить одни параметры при изменении других, обязательно скопируйте состояние запроса маршрутизатора vue и не используйте его повторно.
Это работает, поскольку вы создаете копию без ссылки:
в то время как ниже приведет к тому, что Vue Router решит, что вы повторно используете тот же запрос, и приведет к
NavigationDuplicated
ошибке:Конечно, вы можете разложить объект запроса, как показано ниже, но вам нужно знать все параметры запроса на вашей странице, иначе вы рискуете потерять их в результирующей навигации.
Обратите внимание: хотя приведенный выше пример предназначен для
push()
, этоreplace()
тоже работает .Проверено на vue-router 3.1.6.
источник
Чтобы установить / удалить сразу несколько параметров запроса, я использовал следующие методы как часть моих глобальных миксинов (
this
указывает на компонент vue):источник
Обычно я использую для этого объект истории. Он также не перезагружает страницу.
Пример:
источник
Вот мое простое решение для обновления параметров запроса в URL-адресе без обновления страницы. Убедитесь, что он подходит для вашего варианта использования.
источник