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

一、使用切换效果
在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;
}