因为在做后台管理的项目，详情页返回列表页，总是默认刷新第一页，尝试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>我去掉就好了，我表示很绝望啊，在前方大哥的基础上改代码不敢妄动
