vue keep-alive同一个组件如何实现状态切换

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>

点击A页面的元素跳转到B页面，从B页面返回的时候可以保留A页面的历史记录和缓存。(上面配置可以实现)
但是，当从C页面点击进入A页面的时候不希望保留A页面的缓存和记录。请问如何动态的控制该页面的状态呢？

Answer 1

解决方案如下：
step1

vuex的store里面初始化值，如下操作：

export default new Vuex.Store({
    state: {
        submitCache : true,
        vmRoute : '',

step2

main.js里面判断路由，修改字段值：

router.afterEach(function(transition){

    //不缓存
    if ( (...) || (...)) {
        store.state.submitCache = false;
    }
    if(transition.path == '/xxx'){
        store.state.vmRoute = transition.path;
    }else{
        store.state.vmRoute = '';
    }
})

step3

app.vue如下修改,判断组件缓存逻辑：

<keep-alive>
    <router-view v-if="isCache && vmRouter"></router-view>
</keep-alive>
<router-view v-if="!isCache || !vmRouter"></router-view>

拿到所需字段：

computed: {
    isCache : function(){
        return this.$store.state.submitCache;
    },
    vmRouter: function(){
        return this.$store.state.vmRoute;
    }
}

Answer 2

你在B页面应该是mounted里请求的把

换成在beforeRouterEnter里请求

但是要注意写法

Answer 3

都写在keep-alive中
这样所有组件都会被缓存，然后对于不想缓存的组件在beforeRouterLeave钩子中将组件销毁

beforeRouteLeave ( to, from, next ) {
    this.$destroy();
    next();
}

销毁后下次再切换到此组件，会重新生成一个实例