记vue keep-alive使用遇到的问题

最近在开发web app相关的项目,项目内各个页面都有nav-bar,所以就通过管理vuex的状态来显示nav-bar和修改nav-bar的标题

其代码大致结构是

<nav-bar :title="title" fixed :z-index="101" v-if="navbarShow"></nav-bar>
<div class="app-main">
  <keep-alive>
    <router-view v-if="$route.meta && $route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="$route.meta && !$route.meta.keepAlive"></router-view>
</div>
<tabbar v-if="tabbarShow"></tabbar>

设计图上有些头部风格是不一样的,所以有些页面就不共用nav-bar
但当设置navbarShowfalsetabbarShow也为false时,全部keep-alive的关系就丢失了。
本以为是我keep-alive使用的姿势问题,但改成全部组件都缓存还是会存在丢失缓存问题。
后来发现将nav-barv-if改为v-show,让该节点displaynone,问题解决了.....

标签: vue

添加新评论