[前端] Vue3 keepalive失效卡顿

一开始这么写的：

        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view v-if="$route.meta.isKeepAlive" v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
        <router-view v-if="!$route.meta.isKeepAlive" v-slot="{ Component }">
          <component :is="Component" />
        </router-view>

没问题，但是由于有同组件多路由复用的情况，复用只有一个缓存；
这就导致多个页面切换时要重新加载数据，不友好。

然后，就按网上说的的加了个key这么写：

        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view v-if="$route.meta.isKeepAlive" :key="$route.fullPath" v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
        <router-view v-if="!$route.meta.isKeepAlive" v-slot="{ Component }">
          <component :is="Component" />
        </router-view>

好家伙，变卡了，每次都触发onMounted #(流汗滑稽)

看一下结构：

对比有缓存的：

？这。。。这不对吧 #(流汗滑稽)

根据有缓存的结构，key应该加在keepalive里面一层：

<!-- 路由匹配到的组件将渲染在这里 -->
        <router-view v-if="$route.meta.isKeepAlive" v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" :key="$route.fullPath" />
          </keep-alive>
        </router-view>
        <router-view v-if="!$route.meta.isKeepAlive" v-slot="{ Component }">
          <component :is="Component" />
        </router-view>

舒服了，多组件复用都缓存了：

喜欢 (1)赏

[1690127128@qq.com]

分享 (0)