vue路由切换动画，前进左滑，后退右滑

最新推荐文章于 2025-07-08 15:17:53 发布

CalmHarbin

最新推荐文章于 2025-07-08 15:17:53 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue切换动画

本文链接：https://blog.csdn.net/qq_33081841/article/details/86244689

本文介绍如何在Vue应用中实现原生APP风格的页面切换动画，通过设置页面层级并利用导航守卫动态改变路由动画，达到前进左滑、后退右滑的效果。同时，文章提到在切换过程中不能使用keep-alive标签以避免影响动画表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、目标

实现原生app页面切换动画。前进左滑后退右滑，同级tab切换无动画

二、分析

1、如何判断页面是前进还是后退？

2、如何在前进后退时使用不同的动画？

三、思路

1、为每个页面定义一个变量来表示当前所在的层级（比如：A -> B -> C ，A的层级为1，B的层级为2，C的层级为3）

2、在页面每次切换时判断当前显示的页面和即将显示的页面的层级关系，即可知道是前进还是后退(例如: A -> B，判断A页面与B页面层级关系，如果A页面层级小于B页面则为前进，反之为后退)。

3、利用vue导航守卫判断层级关系，动态的改变路由动画，（即改变变量transform，transform为一个全局变量，见代码）

四、实现

路由文件，自定义tree为当前页面的层级

ps：目前不能使用keep-avail标签缓存，会导致动画效果不对

const routers=[
    	{
    		path: '/test',
    		name: 'test',   //财务查询页
    		component: resolve => require(['@/page/test/test'], resolve),
    		meta:{
    		   	title : '测试页', // 标题设置在这里
    			tree: 4,
       }
	},
	{
		path: '/list1',
		name: 'list1',   //财务查询页
		component: resolve => require(['@/page/test/list1'], resolve),
		meta:{
		   	title : '测试页', // 标题设置在这里
			tree: 1,
		}
	},
	{
		path: '/list2',
		name: 'l