Как правильно связать vue-awesome-swiper и vue-router в Nuxt.js?

Question

[TheThing]

При разработке мобильной версии Nuxt-приложения появилась необходимость переходить на другую страницу (другая категория) при свайпе вправо/влево. Решил использовать уже используемый в проекте vue-awesome-swiper через директиву.
Сделать три слайда (предыдущий, текущий, следующий) с начальным вторым элементом и по событию slide-change-transition-end делать $router.replace('новый путь').
Однако возникает проблема, сначала рендерится html код после которого директивой подвязывается свайпер. При этом верстка прыгает на предыдущий слайд, затем обратно на новый текущий. То же самое если использовать свайпер как компонент через .

Есть ли возможность как-нибудь такую схему реализовать через Nuxt или сама концепция фреймворка запрещает такое поведение?

Answer 1

[Сергей Левченко]

А зачем вам слайдшоу то в этом случае? И какая разница nuxt или нет.
Вам надо либо в mounted хуке навесить нативные события:

document.addEventListener('touchstart', this.handleTouchStart, false);        
document.addEventListener('touchmove', this.handleTouchMove, false);

а в методах смотреть данные из события и проверять куда свайпает пользователь и делать $router.replace('новый путь').
Либо использовать уже готовое решение, например
https://github.com/jerrybendy/vue-touch-events

Comments

[TheThing]

Потому что, к сожалению, должен показываться предыдущий или следующий слайд в процессе перелистывания. И просто через Transitions и свайп влево/вправо это не решить.