当前位置：首页 > VUE

vue路由实现滑动

2026-03-07 18:55:39VUE

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

在Vue项目中实现路由切换时的滑动效果，可以通过以下几种方式实现：

使用Vue过渡动画

Vue的<transition>组件可以配合CSS实现路由切换时的滑动效果。在路由视图外层包裹过渡组件，并定义对应的CSS过渡类名：

<template>
  <transition name="slide">
    <router-view></router-view>
  </transition>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

使用第三方库vue-page-transition

vue-page-transition是一个专门为Vue路由切换提供动画效果的库，支持多种预设动画：

安装：

npm install vue-page-transition

使用：

import VuePageTransition from 'vue-page-transition'
Vue.use(VuePageTransition)

<template>
  <vue-page-transition name="slide">
    <router-view/>
  </vue-page-transition>
</template>

结合CSS动画库

可以使用Animate.css等CSS动画库实现更丰富的滑动效果：

<template>
  <transition
    enter-active-class="animate__animated animate__slideInRight"
    leave-active-class="animate__animated animate__slideOutLeft"
  >
    <router-view></router-view>
  </transition>
</template>

<script>
import 'animate.css'
</script>

动态控制滑动方向

如果需要根据路由变化动态控制滑动方向，可以在路由守卫中设置状态：

vue路由实现滑动

router.beforeEach((to, from, next) => {
  const toDepth = to.meta.index || 0
  const fromDepth = from.meta.index || 0
  to.meta.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  next()
})

.slide-left-enter-active, .slide-left-leave-active,
.slide-right-enter-active, .slide-right-leave-active {
  transition: all 0.5s;
}
.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%);
}