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>使用第三方库
对于更复杂的滑动效果，可以考虑使用专门的路由过渡库：
- 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>- vue2-transitions： 提供预设的滑动动画效果，包括 slide-left、slide-right 等。
注意事项
-
确保路由组件有唯一的
key属性，避免过渡动画不触发：<router-view :key="$route.fullPath"></router-view> -
滑动动画性能优化：
will-change: transform; backface-visibility: hidden; -
移动端适配可能需要额外处理 touch 事件和滚动行为。
以上方法可根据项目需求选择使用，从简单 CSS 过渡到复杂的方向感知滑动都能实现。
