vue-router怎么实现手势滑动触发返回功能

本文小编为大家详细介绍“vue-router怎么实现手势滑动触发返回功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue-router怎么实现手势滑动触发返回功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联-专业网站定制、快速模板网站建设、高性价比朔州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式朔州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖朔州地区。费用合理售后完善，十余年实体公司更值得信赖。

vue-router的路由变换只存在“变换前”和“变换后”，不存在“切换中”的状态，所以做不到大多数app（微信那样的）在滑动过程中让界面跟随手指移动。但滑动事件还是可以监听的，我们可以在滑动之后再触发路由回退事件。

微博的滑动返回基本上就是这样的原理：先滑动、再触发返回事件，但用起来很是怪异，有严重的滞后感。夸克浏览器做的就比较好：一是滑动时界面虽然不动，但是界面上有小图标提示，能让用户接受到反馈；二是返回过程很快，没有多余的过渡动画。

app.vue文件如下：

下面看下vue图片左右滑动及手势缩放

引入vue-awesome-swiperimport 'swiper/dist/css/swiper.css';

import { swiper, swiperSlide } from 'vue-awesome-swiper';components: {
 swiper,
 swiperSlide,
},data() {
 return {
 swiperOption: {
  width: window.innerWidth,
  zoom : true,
  initialSlide: 0,
 },
 };
},