vue中怎么动态控制keep-alive缓存

Question

开发中有一个需求 我称 A B C 三个页面 从A到B页面不需要使用keep-alive 但是从B 到C使用

从a页面跳转到b页面时 需要发请求拿到一个的数据回显, 改页面数据时需跳到c页面 当从c页面返回b页面时 会重新请求一次 这次又把我更改过的数据又给覆盖了 我现在采用的是keepalive实现的 但是这是有bug a页面有很多不一样的数据 当我跳到b页面时 应该是不同的数据 现在的话数据是不会变的 我想问一下怎样能动态控制一个页面的是否keepalive缓存

Answer 1

这个属于前进刷新页面，返回不刷新页面的问题。具体思路是在meta那边加一个isBack参数，用于区分是否是返回，然后再结合router事件来做。
1.在B页面的beforeRouteEnter方法里面判断路由来源，如果来源为C,则设置to.meta.isBack=true。如果来源为A,则设置to.meta.isBack=false.
2.在B页面的activated方法中判断this.$route.meta.isBack的值，如果为false,则重新调用接口，刷新数据

Answer 2

使用一个变量控制呢？只要发现是从a页面跳到b页面的，页面就请求回显数据，从c到b就不用。

Answer 3

使用keep-alive中的 include 结合store使用，代码我在这个帖子中回答过。
你的要求其实就是从A -> B 的时候B不缓存，从C -> B的时候B缓存
可以利用beforeRouteLeave操作B页面

beforeRouteLeave (to, from, next) {
    if (to.name === 'C') {
        // 跳转到C页面的时候缓存B页面
        this.$store.dispatch('addCacheView', 'B')   
    } else if (to.name === 'A') {
        // 返回到A页面的时候B页面不再缓存
        this.$store.dispatch('deleteCacheView', 'B')
    }
    next()
}

keep-alive的地方结合mapGetters使用

<keep-alive  :include="cacheView">
    <router-view  class="page-content"/>
</keep-alive>

computed: {
    ...mapGetters(['cacheView'])
}