vue组件缓存与动画效果_<router-view v-slot="{ component, route }">-CSDN博客

本文链接：https://blog.csdn.net/m0_71933813/article/details/129542249

主要是利用了router-view组件的插槽来实现，使用<transition>和<keep-alive>组件来包裹路由组件

注解：

<router-view> v-slot Component是router-view要显示的组件对象 route路由是什么

<transition>name定义要过度的动画效果也就是css样式

<transition>mode过渡模式（执行的顺序）先进来在出去

<keep-alive> max缓存组件数量，限定缓存5

<component>is动态渲染组件判断条件如果为真就渲染组件

   <!-- 使用keep-alive缓存组件内容 -->
    <div style="height: 80vh;">
        <!--v-slot Component是router-view要显示的组件对象 route路由是什么-->
        <router-view v-slot="{ Component, route }">
            <!--方式一
                name定义要过度的动画效果也就是css样式 mode过渡模式（执行的顺序）先进来在出去 
            -->
            <transition name="slide-fade" mode="in-out">
                <!--keep-alive用于缓存组件   max缓存组件数量，限定缓存5 -->
                <!-- is动态渲染组件 判断条件如果为真就渲染组件 key绑定的是key值-->
                <keep-alive max="5">
                    <component :is="Component" :key="route.fullPath"></component>
                </keep-alive>
            </transition>

            <!-- 方式二 -->
            <!-- <transition name="slide-fade" mode="in-out">
                <keep-alive max="5">
                    <component :is="Component" v-if="route.meta.keepAlive" :key="route.fullPath"></component>
                </keep-alive>
            </transition>
            <transition name="slide-fade" mode="in-out">
                <component :is="Component" v-if="!route.meta.keepAlive" :key="route.fullPath"></component>
            </transition> -->
        </router-view>
    </div>

注意（keep-alive的作用）：

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，

结合路由和动态组件一起使用，用于缓存组件

<style scoped lang="less">
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
/* 进入时的过渡效果 */
.slide-fade-enter-active {
    transition: all 0.3s ease-out;
}

/* 离开时的过渡效果 */
.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

/* 从什么位置进入和从什么位置出去 */
.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(-20px);
    opacity: 0;
}
</style >

特此注意：

问题

首页没有动画

解决

在不改变路径的方式，在Main组件下渲染

   // 首页
    {
        path: 'home',
        name: '',
        component: () => import('../views/Main.vue'),
        meta: {
            title: 'home',
            icon: 'icon-shouye' // 阿里图标库
        },
        children: [
            {
                path: '',
                name: 'home',
                component: () => import('../views/Home.vue'),
                meta: { // 自定义路由信息
                    title: 'home',
                    icon: 'icon-shouye' // 阿里图标库
                }
            }
        ]
    },

问题