当前位置：首页 > VUE

vue路由实现滑动

2026-01-08 04:57:03VUE

实现 Vue 路由滑动效果的方法

使用 Vue Router 结合 CSS 过渡动画

在 Vue Router 的路由视图组件 <router-view> 上添加过渡效果，结合 CSS 实现滑动动画。

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></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: all 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>

使用第三方库 vue-page-transition

vue-page-transition 是一个专门为 Vue 路由过渡效果设计的库，提供多种预定义的过渡效果。

安装：

npm install vue-page-transition

使用：

import Vue from 'vue'
import VuePageTransition from 'vue-page-transition'

Vue.use(VuePageTransition)

<template>
  <vue-page-transition name="fade-in-right">
    <router-view/>
  </vue-page-transition>
</template>

使用 Swiper 实现全屏滑动路由

结合 Swiper.js 可以实现类似移动端应用的全屏滑动路由效果。

安装 Swiper：

npm install swiper

实现代码：

<template>
  <swiper
    :options="swiperOption"
    @slideChangeTransitionEnd="onSlideChange"
    ref="mySwiper"
  >
    <swiper-slide v-for="(route, index) in routes" :key="index">
      <router-view :name="route.name"></router-view>
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.scss'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        direction: 'vertical',
        mousewheel: true
      },
      routes: [
        { name: 'home' },
        { name: 'about' },
        { name: 'contact' }
      ]
    }
  },
  methods: {
    onSlideChange() {
      const currentIndex = this.$refs.mySwiper.swiper.activeIndex
      this.$router.push(this.routes[currentIndex].name)
    }
  }
}
</script>