Маршрутизатор Vue2 с несколькими неупорядоченными дополнительными параметрами - PullRequest
Новая
       5

Маршрутизатор Vue2 с несколькими неупорядоченными дополнительными параметрами

0 голосов
/ 07 февраля 2019

Я не уверен, возможно ли это вообще, но вот что я пытаюсь сделать:

Я работаю над страницей, чтобы показать результаты поиска различных продуктов.Продукты имеют многократные фильтры (например, размер, вес, цвет, страна и т. Д.).Я хотел бы, чтобы URL «описал» эти фильтры.

Я могу сделать что-то довольно простое с '?'(например: / цвет /: цвет? / страна /: страна).Но это заставляет определенный порядок, и все разделы в URL должны быть введены.Я имею дело с более чем 10 фильтрами, и некоторые из них могут иметь несколько цветов.

Вариант без Vue, который я рассматриваю, будет выглядеть примерно так: example.com/search/?weight=10-20&color=blue&color= red & country = usa.

Для этого потребуется использовать Window.history.push и синтаксический анализ queryString с помощью javascript, хотя я, вероятно, вообще не смогу использовать VueRouter.

IУ меня нет опыта работы с Vue.js, поэтому любые идеи рекомендуется.

Спасибо

1 Ответ

0 голосов
/ 07 февраля 2019

Вы можете использовать $route.query для доступа к параметрам запроса из текущего URL.Не нужно разбирать его самостоятельно.

Ваш шаблон может напрямую обращаться к параметрам запроса: 

<div v-if="$route.query.weight">weight: {{ $route.query.weight }}</div>
<div v-if="$route.query.country">country: {{ $route.query.country }}</div>
<div v-if="$route.query.color">color: {{ $route.query.color }}</div>

И ваш скрипт может обращаться к таким параметрам: 

methods: {
  logQueryParams() {
    console.log("weight", this.$route.query.weight)
    console.log("country", this.$route.query.country)
    console.log("color", this.$route.query.color)
  }
}

Ваш сценарий также может наблюдать за изменениями параметров: 

watch: {
  ["$route.query.weight"](weight, oldWeight) {
    console.log("new weight", weight);
  }
}

И вы можете принудительно протолкнуть новый маршрут с помощью $router.push: 

methods: {
  searchCanada() {
    this.$router.push({ name: "search", query: { country: "canada" } });
  }
}

демо

...