keep-alive在路由钩子设置缓存或者不缓存如有 3 个路由 A、B、C， B 跳到 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

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