vue路由实现滑动

实现 Vue 路由滑动过渡的方法

在 Vue 项目中，可以通过结合 Vue Router 和过渡动画（Transition）实现页面切换时的滑动效果。以下是具体实现方式：

使用 Vue Transition 组件

在路由视图外层包裹 <transition> 组件，并通过 CSS 定义滑动动画：

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

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

动态设置滑动方向

如果需要根据路由前进/后退改变滑动方向，可以通过路由元信息（meta）和动态类名实现：

// router.js
const routes = [
  {
    path: '/',
    component: Home,
    meta: { transition: 'slide-left' }
  },
  {
    path: '/about',
    component: About,
    meta: { transition: 'slide-right' }
  }
]

<template>
  <transition :name="$route.meta.transition || 'slide'">
    <router-view></router-view>
  </transition>
</template>

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

使用第三方库

对于更复杂的滑动效果，可以考虑使用专门的路由过渡库：

1. vue-page-transition：

   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>

1. vue2-transitions： 提供预设的滑动动画效果，包括 slide-left、slide-right 等。

注意事项

• 确保路由组件有唯一的 key 属性，避免过渡动画不触发：

  <router-view :key="$route.fullPath"></router-view>

• 滑动动画性能优化：

  will-change: transform;
  backface-visibility: hidden;

• 移动端适配可能需要额外处理 touch 事件和滚动行为。

  

以上方法可根据项目需求选择使用，从简单 CSS 过渡到复杂的方向感知滑动都能实现。