keep-alive添加后页面不缓存问题 - 简书

 解决keep-alive缓存导致页面不刷新的问题 - 简书

vue3使用路由keep-alive和监听路由实现transition - 大禹不治水 - 博客园

keep-alive生命周期钩子函数：activated、deactivated
activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated:  页面退出的时候会触发deactivated，
当再次前进或者后退的时候只触发activated    
使用<keep-alive>会将数据保留在内存中，
如果要在每次进入页面的时候获取最新的数据，
需要在activated阶段获取数据，
承担原来created钩子中获取数据的任务

// transition
<transition name="van-fade">
      <router-view />
</transition>

// keep-alive
<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>

↑解决keep-alive缓存导致页面不刷新的问题 

在router里面 meta属性添加 keepAlive:true 为true的页面才缓存其他的不缓存

在actived生命周期函数中再调一次初始化函数。

 vue3:

<router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transitionName">
      <keep-alive v-if="route.meta.keepAlive">
        <component :is="Component" />
      </keep-alive>
      <component :is="Component" v-else />
    </transition>
  </router-view>

<keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>

activated () {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
  }

加了<keep-alive> 后防止数据重复请求: created() mouted() 就只能加载一次,但是 activated()  可以重复、重新加载