Как установить параметры запроса URL в Vue с помощью Vue-Router

Я пытаюсь установить параметры запроса Vue-router при изменении полей ввода, я не хочу переходить на другую страницу, но просто хочу изменить параметры запроса url на той же странице, я делаю вот так:

this.$router.replace({ query: { q1: "q1" } })

Но это также обновляет страницу и устанавливает y-позицию в 0, т.е. прокручивает ее до верхней части страницы. Является ли это правильным способом задания параметров запроса URL или есть лучший способ сделать это.

Отредактировано:

Вот мой код маршрутизатора:

export default new Router({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition)  => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [
    ....... 
    { path: '/user/:id', component: UserView },
  ]
})

Ответы

Ответ 1

Вот пример в документах:

// 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>.

Это может быть недостающая вещь в вашем примере кода.

EDIT: Дополнительная информация после комментариев

Пробовали ли вы использовать именованные маршруты в этом случае? У вас есть динамические маршруты, и проще предоставить параметры и запрос отдельно:

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.

Ответ 2

На самом деле вы можете просто this.$router.push({query: {plan: 'private'}}) запрос следующим образом: this.$router.push({query: {plan: 'private'}})

Основано на: https://github.com/vuejs/vue-router/issues/1631

Ответ 3

Не перезагружая страницу или не обновляя dom, history.pushState может выполнить эту работу.
Добавьте этот метод в свой компонент или в другое место, чтобы сделать это:

addParamsToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path +
      '?' +
      Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          )
        })
        .join('&')
  )
}

Поэтому в любом месте вашего компонента вызовите addParamsToLocation({foo: 'bar'}), чтобы передать текущее местоположение с параметрами запроса в стеке window.history.

Чтобы добавить параметры запроса в текущее местоположение , не нажимая новую запись в истории, используйте вместо этого history.replaceState.

Протестировано с Vue 2.6.10 и Nuxt 2.8.1.

Будьте осторожны с этим методом!
Vue Router не знает, что URL изменился, поэтому он не отражает URL после pushState.

Ответ 4

this.$router.push({ query: Object.assign(this.$route.query, { new: 'param' }) })

Ответ 5

Чтобы установить/удалить несколько параметров запроса одновременно, я использовал приведенные ниже методы как часть моих глобальных миксинов (this указывает на компонент vue):

    setQuery(query){
        let obj = Object.assign({}, this.$route.query);

        Object.keys(query).forEach(key => {
            let value = query[key];
            if(value){
                obj[key] = value
            } else {
                delete obj[key]
            }
        })
        this.$router.replace({
            ...this.$router.currentRoute,
            query: obj
        })
    },

    removeQuery(queryNameArray){
        let obj = {}
        queryNameArray.forEach(key => {
            obj[key] = null
        })
        this.setQuery(obj)
    },