解决Vue中<keep-alive>导致页面切换异常的问题？

Question

当前代码如下，需要实现不同页面的切换，并且实现缓存效果，但目前缓存效果未实现。

<router-view v-slot="{ Component, route }">
            <keep-alive>
                <transition :name="transitionName">
                    <div :key="route?.name" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;">
                        <component :is="Component" />
                    </div>
                </transition>
            </keep-alive>
        </router-view>

在onMounted中输出1来判断是否缓存成功，即首次加载该页面输出1，进入二级界面后返回将不在输出1。尝试修改后如下

    <router-view v-slot="{ Component, route }">
    
            <transition :name="transitionName">
                <keep-alive>
                        <component :is="Component" v-if="route?.meta?.isKeepAlive || route?.meta?.isRouterKeepAlive"
                            :key="route?.meta?.isRouterKeepAlive ? route?.fullPath : route?.name" 
                            style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"/>
                </keep-alive>
            </transition>

    </router-view>

缓存虽然实现了，但是页面切换变得混乱。如何同时保留页面切换与缓存的效果呢？

Answer 1

这样试下

<template>
  <router-view v-slot="{ Component, route }">
    <transition :name="transitionName">
      <keep-alive :include="shouldCache(route)">
        <component :is="Component" 
                   :key="route.fullPath"
                   @mounted="onMountedHandler"
                   style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup>
import { ref, onBeforeRouteUpdate, useRoute } from 'vue-router';
import { onMounted } from 'vue';

const route = useRoute();
const transitionName = ref('fade'); // 默认过渡名称

// 监听路由的变化
onBeforeRouteUpdate((to, from) => {
  // 在路由变更之前改变过渡名称
  transitionName.value = `${to.name}-transition`;
});

// 判断是否应该缓存当前组件
function shouldCache(route) {
  return route.meta.isKeepAlive || route.meta.isRouterKeepAlive ? route.name : null;
}

// 处理 mounted 钩子事件
function onMountedHandler() {
  console.log(1);
}