当前位置：首页 > VUE

vue实现滑动切换路由

2026-02-22 06:44:06VUE

实现滑动切换路由的基本思路

在Vue中实现滑动切换路由，通常结合Vue Router和手势库（如hammer.js或touch事件）来完成。核心是通过监听触摸事件，判断滑动方向并触发路由跳转。

安装依赖

确保项目中已安装Vue Router。如需手势库支持，可安装hammer.js：

npm install hammerjs

基于原生touch事件的实现

通过监听touchstart、touchmove、touchend事件计算滑动方向：

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      endX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      this.endX = e.touches[0].clientX;
    },
    handleTouchEnd() {
      const threshold = 50; // 滑动阈值
      if (Math.abs(this.endX - this.startX) < threshold) return;

      if (this.endX < this.startX) {
        // 向左滑动，跳转下一个路由
        this.$router.push({ path: '/next-route' });
      } else {
        // 向右滑动，返回上一个路由
        this.$router.go(-1);
      }
    }
  }
}
</script>

使用hammer.js实现手势控制

hammer.js提供更丰富的手势识别：

<template>
  <div ref="swipeContainer">
    <router-view />
  </div>
</template>

<script>
import Hammer from 'hammerjs';

export default {
  mounted() {
    const hammer = new Hammer(this.$refs.swipeContainer);
    hammer.on('swipeleft', () => {
      this.$router.push('/next-route');
    });
    hammer.on('swiperight', () => {
      this.$router.go(-1);
    });
  }
}
</script>

添加过渡动画

结合Vue的过渡系统实现滑动动画效果：

<template>
  <div>
    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    '$route'(to, from) {
      const toDepth = to.meta.index || 0;
      const fromDepth = from.meta.index || 0;
      this.transitionName = toDepth > fromDepth ? 'slide-left' : 'slide-right';
    }
  }
}
</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s ease;
  position: absolute;
  width: 100%;
}

.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter {
  transform: translateX(-100%);
}
.slide-right-leave-to {
  transform: translateX(100%);
}
</style>

路由配置示例

在路由配置中添加index元信息控制滑动方向：

vue实现滑动切换路由

const routes = [
  {
    path: '/',
    component: Home,
    meta: { index: 0 }
  },
  {
    path: '/about',
    component: About,
    meta: { index: 1 }
  }
]