Как добавить параметры в query?

В Vue.js есть несколько способов добавления параметров в query строку URL. Это может быть полезно, когда вы хотите передать данные между различными компонентами или сохранить историю и состояние приложения.

Первый способ - использование маршрутизатора Vue Router. Vue Router предоставляет API для управления маршрутами и параметрами запросов в URL. Чтобы добавить параметры в query, вы можете использовать метод push или replace объекта router. Например:

// импорт Vue и Vue Router
import Vue from 'vue'
import Router from 'vue-router'

// установка Vue Router
Vue.use(Router)

// создание экземпляра роутера
const router = new Router({
  routes: [
    {
      path: '/example',
      component: ExampleComponent
    }
  ]
})

// добавление параметров в query
router.push({ path: '/example', query: { param1: 'value1', param2: 'value2' }})

В этом примере param1 и param2 - это параметры, которые вы хотите добавить в query строку для маршрута с путем /example. push метод добавляет новую запись в историю браузера, а replace метод заменяет текущую запись без добавления новой.

Второй способ - использование объекта $route. У $route есть свойство query, которое позволяет получать и устанавливать параметры запроса. Вы можете использовать это свойство для добавления или изменения параметров в query. Например:

export default {
  methods: {
    addParamsToQuery() {
      this.$router.replace({ 
        path: '/example',
        query: { param1: 'value1', param2: 'value2' }
      })
    }
  }
}

Этот код добавляет параметры param1 и param2 со значениями 'value1' и 'value2' соответственно в query строку для текущего маршрута.

Третий способ - использование this.$route.params. Если у вас есть динамические сегменты в пути URL, вы можете использовать свойство params объекта $route для передачи параметров между компонентами. Например:

// Компонент отправляющий запрос
export default {
  methods: {
    navigateToExample() {
      this.$router.push({ 
        name: 'example', 
        params: { param1: 'value1', param2: 'value2' }
      })
    }
  }
}

// Компонент принимающий запрос
export default {
  computed: {
    param1() {
      return this.$route.params.param1
    },
    param2() {
      return this.$route.params.param2
    }
  }
}

В этом примере param1 и param2 заменяются соответствующими значениями из query строки и доступны в компоненте-получателе. Обратите внимание, что вам также необходимо настроить маршруты для компонентов.

Все перечисленные методы позволяют добавлять параметры в query строки URL в Vue.js. Выберите метод в зависимости от вашей конкретной ситуации и требований.