keepAlive的使用体验

keepAlive的使用体验

因为在做后台管理的项目，详情页返回列表页，总是默认刷新第一页，尝试cookie存下列表筛选条件,在返回页面的时候加入条件再查询，非常麻烦又难以控制，而且仍然是请求数据，不符合要求；查询百度感觉大家都在用keep-alive,就在空闲时间慢慢调整这个，今天终于调好了，热烈庆祝

清楚了生命周期就会明白一点，以下是查询的信息
第一次进入页面的生命周期：beforeRouterEnter ->created->…->activated->…->deactivated
缓存之后的声明周期：beforeRouterEnter ->activated->deactivated
这在我测试的时候帮助很大，因为是慢慢摸索的（捂脸）

{
   path: 'list',
   component: () => import('@/views/product/list'),
   name: 'productList',
   meta: {
     title: '商品列表',
     keepAlive: true // 重点注意！！！！
   }
 },

<!-- AppMain.vue -->
<!-- 因为我这边是嵌套AppMain.vue的组件， 网上大部分都是在App.vue里写的，这里有一点不一样 -->
<transition name="fade-transform" mode="out-in">
	<keep-alive>
		<router-view v-if="$route.meta.keepAlive"/>
	</keep-alive>
</transition>
<transition name="fade-transform" mode="out-in">
	<router-view v-if="!$route.meta.keepAlive" :key="key"/>
</transition>

// list.vue
created() {
  this.getList()
},
beforeRouteEnter(to, from, next) {
  if (to.name === 'productList' && from.name === 'ProductSkuM') {
    to.meta.keepAlive = true // 让列表页缓存，即不刷新
    next()
  } else {
    to.meta.keepAlive = false // 让列表页即不缓存刷新
    next()
  }
},
activated() {
  console.log('缓存') // 方便我测试看的
},

根据查的资料，目前修改的就这三个地方，功能就实现了。但是我真的试了很多次，一直没效果
影响结果的重要代码是

<!-- AppMain.vue -->
<transition name="fade-transform" mode="out-in">
  <keep-alive :include="cachedViews"><!-- :include="cachedViews" 这里去掉 -->
    <router-view v-if="$route.meta.keepAlive" :key="key"/><!-- 这里影响不大 -->
  </keep-alive>
</transition>
<transition name="fade-transform" mode="out-in">
  <router-view v-if="!$route.meta.keepAlive" :key="key"/>
</transition>

我去掉就好了，我表示很绝望啊，在前方大哥的基础上改代码不敢妄动