vue使用keep-alive实现动态页面缓存的代码

我的需求：列表页面跳转到详情页面，缓存列表页面；重新进入列表页面重新获取新数据。

一、include名称匹配的组件会被缓存，exclude名称匹配的组件不被缓存

注意：

1、确定当前的vue版本的是2.1+，因为include和exclude是vue2.1.0新增的两个属性。

2、多级嵌套<router-view></router-view>，但凡有超过两个以上的router-view且是父子级关系,请都加上keep-alive，只加一个不会生效。 

二、cacheViews 放在store中，如果有需要缓存的组件，push组件name到cacheViews ，不需要缓存的组件在cacheViews删除即可

注意：

1、不是router.js中的name,而是单个vue组件中的name属性。建议将router.js中的name和vue组件的name保持一致,不要混乱。

const state = {
    cacheViews: []
}

const mutations = {
    ADD_CACHE_VIEWS: (state, name) => {
        if (name) {
            const index = state.cacheViews.findIndex(i => i === name);
            if (index === -1) {
                state.cacheViews.push(name)
            }
        }
    },
    REMOVE_CACHE_VIEWS: (state, name) => {
        const index = state.cacheViews.findIndex(i => i === name);
        if (index > -1) {
            state.cacheViews.splice(index, 1)
        }
    },
    CLEAR_CACHE_VIEWS() {
        if (state.cacheViews.length > 0) {
            state.cacheViews = []
        }
    }
}

const actions = {
    addCacheViews({ commit }, name) {
        // 增加需要缓存的组件名称
        commit('ADD_CACHE_VIEWS', name)
    },
    removeCacheViews({ commit }, name) {
        // 去掉缓存的组件名称
        commit('REMOVE_CACHE_VIEWS', name)
    },
    clearCacheViews({commit}) {
        // 清空全部缓存的组件名称
        commit('CLEAR_CACHE_VIEWS')
    },
}


export default {
    namespaced: true,
    state,
    mutations,
    actions
}

三、配置哪些页面到哪些页面需要页面缓存

/**
 * 路由页面缓存配置，key页面到value页面会缓存key页面。
 * @type
 */
export const routerKeepMap = {
    "aList": ["aInfo", "aEdit"],
    "bList": ["bInfo", "bEdit"]
}

/**
 * 路由页面缓存处理。
 * @param to
 * @param from
 * @param next
 */
export async function routerKeepHandler(to, from, next) {
    // console.log('from name', from.name, 'to name', to.name)
    let keys = isNotNull(Object.keys(routerKeepMap)) ? Object.keys(routerKeepMap) : [];
    if (keys.length === 0) { // 没有缓存页面时，清空全部缓存
        await store.dispatch('common/clearCacheViews')
    } else if (keys.includes(from.name)) { // 当前为缓存页面时
        if (routerKeepMap[from.name].includes(to.name)) { // 目标页面为缓存目标页面时，增加当前页面缓存
            await store.dispatch('common/addCacheViews', from.name)
        } else { // 目标页面不是缓存目标页面时，清空当前页面缓存
            await store.dispatch('common/removeCacheViews', from.name)
        }
    } else if (keys.includes(to.name)) { // 目标页面为缓存页面时，增加目标页面
        await store.dispatch('common/addCacheViews', to.name)
    } else if (!keys.includes(to.name)) { // 目标页面不是缓存页面、不是缓存目标页面时，清空全部缓存
        let values = []
        for (const key in routerKeepMap) {
            values = values.concat(routerKeepMap[key])
        }
        if (!values.includes(to.name)) {
            await store.dispatch('common/clearCacheViews')
        }
    }
    if (next) {
        next()
    }
}

四、全局路由守卫实时更新缓存页面

五、若需要缓存滚动条或局部刷新等操作可在组件内的activated处理