Всем привет! Прошу помощи у знатоков vue-router или nuxt. Есть один интернет-магазин на vue. Имеется шапка с категориями страниц, пусть будут категрория1, категория2, категория3. Переход на категорию происходит при помощи vue-router - в момент перехода слаг категории записывается в params и в зависимости от слага формируется контент страницы. На некоторых страницых есть фильтры товаров - картинки, обернутые в nuxt-link. Предполагается, что когда пользователь нажмет на фильтр, у меня вызовется функция setRouter, которая в зависимости от количества активных фильтров либо запишет slug фильтра в params, если активен один фильтр; либо в query, если их несколько; либо вернет url категории, если нет ни одного активного фильтра. Активные фильтры предполагаю хранить в activeFilterIds
<ul class="filter-list">
<li class="filter-list__item" v-for="(filter, index) in filters" :key="index">
<nuxt-link
:to="setRoute(filter)"
class="filter-list__link">
<div class="filter-list__box" @click="handleClickFilter(filter.slug)">
<img
v-if="activeFilterIds && activeFilterIds.includes(filter.slug)"
class="filter-list__img"
:src="`${filter.iconActive}`"
:alt="filter.title" />
<img
v-else
class="filter-list__img"
:src="`${filter.iconDefault}`"
:alt="filter.title" />
</div>
<span class="filter-list__title">{{ filter.title }}</span>
</nuxt-link>
</li>
</ul>
data() {
return {
activeFilterIds: this.$route.params.filter || this.$route.query.filters || []
}
},
methods: {
setRoute(filter) {
let url;
if(this.activeFilterIds.length === 0) {
url = `/${this.$route.params.category}`;
}
if(this.activeFilterIds.length === 1) {
url = `/${this.$route.params.category}/${this.activeFilterIds[0]}`
}
if(this.activeFilterIds.length > 1) {
url = {query: {filters: this.activeFilterIds}}
}
return url
},
handleClickFilter(filter) {
if(this.activeFilterIds) {
const index = this.activeFilterIds.findIndex(item => item === filter);
if(index !== -1) {
this.activeFilterIds.splice(index, 1);
} else {
this.activeFilterIds.push(filter);
}
} else {
this.activeFilterIds.push(filter);
}
}
}
В итоге у меня получается некоторое запаздывание routerа. Я нажала на фильтр, в activeFilterIds фильтр записался, но в урле не появился. Когда у меня 2 активных фильтра, в урле появляется слаг фильтра, который нажали на предыдущем шаге, когда 3 активных фильтра появляется query с фильтрами. Что за магия такая?
Простой
