vue路由实现滑动
实现 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>注意事项
路由滑动效果需要考虑页面堆叠上下文问题，确保使用 position: absolute 或合适的 z-index 设置。
对于复杂场景，可能需要结合 Vue 的 <keep-alive> 缓存路由组件状态，避免滑动时组件重复渲染导致的性能问题。
滑动方向可以根据实际需求调整，常见的有水平滑动（左右）和垂直滑动（上下）两种方式。
