keep-alive在路由钩子设置缓存或者不缓存如有 3 个路由 A、B、C， B 跳到 A，A 不刷新 C 跳到 A，A 刷新

Question

Vue中keep-alive在路由钩子设置缓存或者不缓存如有 3 个路由 A、B、C， B 跳到 A，A 不刷新 C 跳到 A，A 刷新
我在网上找的代码第一次的时候没有效果，但是之后就正常了，不知道什么原因导致的
router

App.vue

             <keep-alive>
                        <router-view v-if="$route.meta.keepAlive">
                            <!-- 这里是会被缓存的视图组件，比如 Home！ -->
                        </router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta.keepAlive">
                        <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
                    </router-view>
                    

在C中 C 到 A A刷新

     beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // 让 A 不缓存，即刷新
        next();
  },

B到A A不刷新

    beforeRouteLeave(to, from, next) {
                to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
               next();
  }

为什么第一次没有效果 之后就正常了呢？ 请求怎么解决呢？

Answer 1

我也有同样的问题，解决了吗？
（个人猜想1 因为有两个 router-view ， 第一次加载下面的不缓存，而缓存的里面却没有，只有加载一次缓存的页面后，才会有）
（个人猜想2 是因为设置keep-alive的时机已经晚了。当导航已经知道要去B页面后，此时再设置是否缓存B已经晚了，只会再下次生效了。）

你所说的那种方法不太好。 官方也没有那种用法。。解决方法如下：
A-->B ,B不存， C-->B ,B存
思路基于 A --> B --> C 这种页面关系

具体思路是: （这个思路应该验证了猜想2）
1、用vuex 存储需要缓存的页面B的名称。
<keep-alive :include="$store.state.keepAlives">

<router-view></router-view>

</keep-alive>

2、再结合 导航守卫
从A-->B的时候，设置vuex 缓存， 这样B页面在去其他页面时，就被缓存了。从其他页面到B就加载缓存数据（C就是其他页面），
从B-->A的时候，设置vuex 不缓存（删除B页面名字）， 这样离开B页面到A，B就没有缓存下来， 你从A-->B 就不是缓存的。符合要求 （离开B的时候就设置下次进来是否缓存。这样避开了猜想2）

A页面的 导航守卫
beforeRouteLeave(to, from, next) {

     // 设置下一个路由的 
 if(to.name=='B'){
    this.$store.commit('setkeepAlives',['B'])
 }     
 next();

},

B页面的 导航守卫
beforeRouteLeave(to, from, next) {

     // 设置下一个路由的 
 if(to.name=='A'){
    this.$store.commit('setkeepAlives',[])
 }     
 next();

},

Answer 2

我之前也遇到了类似的问题
记录了一下你可以看看

链接