這篇文章給大家分享的是有關(guān)vue-router如何實(shí)現(xiàn)手勢(shì)滑動(dòng)觸發(fā)返回功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù)團(tuán)隊(duì)是一支充滿著熱情的團(tuán)隊(duì)，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時(shí)竭誠為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)把每個(gè)網(wǎng)站當(dāng)做一個(gè)產(chǎn)品來開發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！

vue-router的路由變換只存在“變換前”和“變換后”，不存在“切換中”的狀態(tài)，所以做不到大多數(shù)app（微信那樣的）在滑動(dòng)過程中讓界面跟隨手指移動(dòng)。但滑動(dòng)事件還是可以監(jiān)聽的，我們可以在滑動(dòng)之后再觸發(fā)路由回退事件。

微博的滑動(dòng)返回基本上就是這樣的原理：先滑動(dòng)、再觸發(fā)返回事件，但用起來很是怪異，有嚴(yán)重的滯后感?？淇藶g覽器做的就比較好：一是滑動(dòng)時(shí)界面雖然不動(dòng)，但是界面上有小圖標(biāo)提示，能讓用戶接受到反饋；二是返回過程很快，沒有多余的過渡動(dòng)畫。

app.vue文件如下：

下面看下vue圖片左右滑動(dòng)及手勢(shì)縮放

引入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,
 },
 };
},