vue router 切换路由的时候，页面的动画效果，使页面切换好看，以及控制有的页面使用切换路由特效，有的页面不用

news2024/11/24 8:46:53

一、使用切换效果
在router文件中 useTransition: true代表需要动画

meta: {
title: “新开卡预填表单”,
keepAlive: true,
useTransition: true
},

[
	{
		path: "/",
		name: "Home",
		meta: {
			title: "首页",
			keepAlive: true,
			useTransition: false
		},
		component: () => import("@/views/home.vue")
	},
	{
		path: "/clientPortrait",
		name: "clientPortrait",
		meta: {
			title: "画像",
			keepAlive: true,
			useTransition: true
		},
		component: () => import("@/views/clientPortrait/clientPortrait.vue")
	},
	{
		path: "/sendCardInputForm",
		name: "sendCardInputForm",
		meta: {
			title: "预填表单",
			keepAlive: true,
			useTransition: true
		},
		component: () => import("@/views/sendCard/inputForm.vue")
	},

在app.vue文件

//路由守卫
router.beforeEach方法，获取来自和去往的路由

useTransition来代表是否需要动画，获取to页面的路由状态，来判断useTransition为true还是false；
from为true to也为true 的时候，切换页面有特效，所以需要设置延时的true，以保证切走的时候有特效，这是下方代码的意义
setTimeout(() => {
// 离开sendCardInputForm,transferAccountsInputForm 需要动画
useTransition.value = true;
}, 1000);

	<!-- <RouterView></RouterView> -->
	<RouterView v-if="!useTransition"></RouterView>
	<RouterView v-if="useTransition" v-slot="{ Component }">
		<transition name="slide" mode="out-in">
			<component :is="Component" />
		</transition>
	</RouterView>

import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
const route = useRoute();
const router = useRouter();
let routes = router.getRoutes();
// 页面切换是否需要动画
let useTransition = ref(false);

useTransition.value = route.meta && route.meta.useTransition ? true : false;

//路由守卫
router.beforeEach((to, from, next) => {
	if (
		to.name === "Home" &&
		(from.name === "sendCardInputForm" || from.name === "transferAccountsInputForm")
	) {
		// sendCardInputForm,transferAccountsInputForm 返回首页不需要动画
		useTransition.value = false;
	} else if (to.name === "Home" && from.name === "clientPortrait") {
		// 画像返回首页需要动画
		useTransition.value = true;
	} else if (to.name === "sendCardInputForm" || to.name === "transferAccountsInputForm") {
		// 进入sendCardInputForm,transferAccountsInputForm 不需要动画
		useTransition.value = false;
		setTimeout(() => {
			// 离开sendCardInputForm,transferAccountsInputForm 需要动画
			useTransition.value = true;
		}, 1000);
	} else {
		//除了以上特别的路由，其他的按照router文件里配置的来决定需要不需要动画效果
		useTransition.value = to.meta && to.meta.useTransition ? true : false;
	}
	next();
});

transition name=“slide” mode=“out-in” slide的动画的css，滑入滑出，标签里 out-in先出后入

.slide-enter-active,
.slide-leave-active {
	transition: all 0.75s ease-out;
}

.slide-enter-to {
	position: absolute;
	left: 0;
}

.slide-enter-from {
	position: absolute;
	left: -100%;
}

.slide-leave-to {
	position: absolute;
	right: -100%;
}

.slide-leave-from {
	position: absolute;
	right: 0;
}