vue组件keepAlive的使用

需要达到的效果：

列表页------->详情页/修改------>返回列表页（缓存列表页）

其它不缓存

 

//vuex/index.js

new Vuex.store({
    state: {
        catchPages: []
    },　　mutations: {
        add(state,item) {
            if (state.catchPages.indexOf(item) === -1)
            state.catchPages.push(item);
        },remove(state,item) {
            let index = state.catchPages.indexOf(item);
            if(index >0)
            state.catchPages.splice(index,1)
        }
    },actions: {
        add(state,item) {
            state.commit('add',item)
        },item) {
            state.commit('remove'return content.catchPages;
        }
    }
})

路由入口的写法：

<!--app.vue-->

<keep-alive :include="$store.getters.catchPages">
        router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive="!$route.meta.keepAlive">

在路由钩子 beforeRouteLeave 中把需要缓存的组件的name加入 vuex 中的 catchPages 数组中

beforeRouteLeave(to,from,next){
    do something
　　next();
}