需求:在检测到某些路由时,跳转的时候不要刷新/加载的动画效果
<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const shouldTriggerTransition = computed(() => {
return (
route.path &&
!(
route.path.includes("/home/homepage") ||
route.path.includes("/home/multiple") ||
route.path.includes("/home/image") ||
route.path.includes("/home/audio") ||
route.path.includes("/home/code")
)
);
});
</script>
<template>
<section class="app-main">
<router-view>
<template #default="{ Component, route }">
<transition
:name="shouldTriggerTransition ? 'fade-slide' : ''"
mode="out-in"
>
<component :is="Component" :key="route.fullPath" />
</transition>
</template>
</router-view>
</section>
</template>

文章描述了如何在Vue应用中使用VueRouter,通过计算属性判断是否需要显示刷新/加载动画,当路由路径不匹配特定列表时,实现平滑过渡而无需页面刷新。

被折叠的 条评论
为什么被折叠?



