手机端路由缓存问题解决方案

徍恺

已于 2024-03-18 16:30:33 修改

阅读量258

点赞数 1

文章标签：前端

于 2024-03-18 16:30:05 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41077075/article/details/136813274

版权

本文探讨了在手机端应用中，如何解决Vue路由组件使用keepAlive缓存时遇到的app.vue中div渲染问题，包括移除不必要的动画插件以避免白屏现象，以及调整v-if条件和配置keepAlive组件的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手机端路由缓存问题解决方案

1.keepAlive = true
2.app.vue component不能包div
3.去掉动画插件否则会返回白屏

去除app.vue mode属性
删除：key
删除div

<template>
  <vanConfigProvider :theme="getDarkMode" :theme-vars="getThemeVars()">
    <routerView v-slot="{ Component }" v-if="isRouterActive">
      <div class="absolute top-0 bottom-0 w-full overflow-hidden">
        <transition :name="getTransitionName" mode="out-in" appear>
          <keep-alive v-if="keepAliveComponents" :include="keepAliveComponents">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </div>
    </routerView>
  </vanConfigProvider>
</template>