当前位置：首页 > VUE

vue路由实现滑动

2026-02-10 19:03:22VUE

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

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

使用 Vue Router 的过渡动画

Vue Router 内置支持过渡效果，可以通过 <transition> 组件实现滑动动画。以下是一个简单的示例：

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

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

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

使用第三方库 vue-page-transition

vue-page-transition 是一个专门为 Vue Router 设计的过渡动画库，支持多种滑动效果。

vue路由实现滑动

安装：

npm install vue-page-transition

使用：

vue路由实现滑动

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

<script>
import { VuePageTransition } from 'vue-page-transition'

export default {
  components: {
    VuePageTransition
  }
}
</script>

自定义滑动效果

如果需要更复杂的滑动效果，可以结合 Vue 的过渡钩子和 CSS 动画自定义实现。

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
    <router-view></router-view>
  </transition>
</template>

<script>
export default {
  methods: {
    beforeEnter(el) {
      el.style.transform = 'translateX(100%)'
    },
    enter(el, done) {
      const animation = el.animate(
        [{ transform: 'translateX(100%)' }, { transform: 'translateX(0)' }],
        { duration: 500 }
      )
      animation.onfinish = done
    },
    leave(el, done) {
      const animation = el.animate(
        [{ transform: 'translateX(0)' }, { transform: 'translateX(-100%)' }],
        { duration: 500 }
      )
      animation.onfinish = done
    }
  }
}
</script>

根据路由方向动态设置滑动效果

可以通过监听路由变化，判断前进或后退方向，动态设置不同的滑动效果。

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

<script>
export default {
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  watch: {
    $route(to, from) {
      const toDepth = to.meta.depth || 0
      const fromDepth = from.meta.depth || 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;
}

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

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

.slide-right-enter-from {
  transform: translateX(-100%);
}

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

使用 CSS 框架的动画效果

如果项目使用了 CSS 框架如 Animate.css，可以直接应用预定义的滑动动画。

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

<script>
import 'animate.css'
export default {}
</script>

以上方法可以根据项目需求选择适合的实现方式，从简单的 CSS 过渡到复杂的自定义动画都能满足不同场景的需求。