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

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

　　app.vue文件如下：

<template> <div id="app" v-on:touchstart="bodyTouchStart" v-on:touchmove="bodyTouchMove" v-on:touchend="bodyTouchEnd"> <transition :name="direction">  <keep-alive include="home">  <router-view class="appView"></router-view>  </keep-alive> </transition> </div></template><script>var swidth = document.documentElement.clientWidth;export default { name: 'app', data: () => ({ // direction 頁面切換的過渡動畫，配合transition組件使用 direction: "slide-left", // touchLeft 劃動起點界限，起點在靠近屏幕左側時才有效 touchLeft: swidth*2/5, // touchStartPoint 記錄起始點X坐標 touchStartPoint: 0, // distance 記錄劃動的距離 distance: 0, // 回退按鈕的dom，根據頁面上是否存在此dom來判斷該路由是否可回退 backBtn: null }), watch: { // 監(jiān)聽路有變化，決定頁面過渡動畫 $route(to, from) {  if (from.name == "login" || from.path.indexOf("home") > -1) {  this.direction = "slide-left";  } else if (to.path.indexOf("home") > -1) {  this.direction = "slide-right";  } else {  const toDepth = to.path.split("/").length;  const fromDepth = from.path.split("/").length;  this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";  } } }, methods: { bodyTouchStart: function(event) {  this.backBtn = document.getElementById("navback");  if (this.backBtn) {  // 獲得起點X坐標，初始化distance為0  this.touchStartPoint = event.targetTouches[0].pageX;  this.distance = 0;  } }, bodyTouchMove: function(event) {  if (this.backBtn && this.touchStartPoint < this.touchLeft) {  // 只監(jiān)聽單指劃動，多指劃動不作響應  if (event.targetTouches.length > 1) {   return;  }  // 實時計算distance  this.distance = event.targetTouches[0].pageX - this.touchStartPoint;  // 根據distance在頁面上做出反饋。這里演示通過返回按鈕的背景變化作出反饋  if (this.distance > 0 && this.distance < 100) {   this.backBtn.style.backgroundPosition = ((this.distance - 100) / 100) * 50 + "px 0";  } else if (this.distance >= 100) {   this.backBtn.style.backgroundPosition = "0 0";  } else {   this.backBtn.style.backgroundPosition = "-50px 0";  }  } }, bodyTouchEnd: function(event) {  if (this.backBtn && this.touchStartPoint < this.touchLeft) {  // 劃動結束，重置數據  this.touchStartPoint = 0;  this.backBtn.style.backgroundPosition = "-50px 0";  // 當劃動距離超過100px時，觸發(fā)返回事件  if (this.distance > 100) {   // 返回前修改樣式，讓過渡動畫看起來更快   document.getElementById("app").classList.add("quickback");   this.$router.back();   setTimeout(function(){   document.getElementById("app").classList.remove("quickback");   },250)  }  } } }}</script><style>#app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; overflow-x: hidden;}.appView { position: absolute; width: 100%; background: #fff; min-height: 100vh; transition: transform 0.24s ease-out;}#app.quickback .appView{ transition-duration: 0.1s;}.slide-left-enter { transform: translate(100%, 0);}.slide-left-leave-active { transform: translate(-50%, 0);}.slide-right-enter { transform: translate(-50%, 0);}.slide-right-leave-active { transform: translate(100%, 0);}</style>