vue keepalive，缓存

Question

路由配置:

{

    path: '/submit',

    component: resolve => {

        require(['./pages/sb.vue'], resolve);

    },

    meta: {keepAlive: true}

},

app.vue配置

<!-- 这里是需要keepalive的 -->

<keep-alive>

    <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

<!-- 这里不会被keepalive -->

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

(因为我的代码比较长，复制了下别人的，基本情况是一样的)

现在有这样一个情形：

list_1和list_2是由同一个vue页面渲染出来的两个路由页面；detail_1是list_1的详情页；

需要判断或者选择缓存的是list_1和list_2页面，详情页不进行缓存；

list_1--detail_1;

list_2--detail_2;

情形1：从list_1跳转到detail_1，缓存list_1页面；浏览器返回list_1，调用缓存；正常。

情形2：从list_1跳转到detail_1，缓存list_1页面；点击list_2,缓存list_2页面；再点击detail_2，浏览器返回list_2；此时页面显示的是list_1的数据，不正常。

情形2怎么处理？缓存了两个页面，无法选择或销毁想要的缓存页面。

Answer 1

按照我们团队的规范，list 列表页会进行 keep-alive 保持，详情页会在离开的时候直接 destroy，避免你提到的连续点开详情页的问题。因为一个component 只会初始化一次，在不销毁新建的情况下，可能无法触发数据的重新获取，进而展示上一次打开的detail_1，keep-alive 是直接休眠在唤醒。另外，针对数据可变的页面去做 keep-alive 也不太符合它的应用场景，既要它不变，又想它变，就矛盾了。

Answer 2

从l2进入d2,然后又回到列表页，显示的是l1，说明缓存没有成功，能把你列表页的代码贴出来看一下吗另外，你一个组件加载不同的列表类型，是根据路由传参判断的类型吗，是不是返回列表页的时候参数没传过去，导致加载的是默认的列表页1？又或者你是在一个页面加载了两个列表组件，只是用if或者show控制了他们的显示隐藏，从详情页回来的时候，该页面控制显示隐藏的变量重置了，所以显示的是默认的列表1？不好猜！！！