vue怎么动态缓存组件

Question

有三个页面分别ABC A(首页) B(列表页) C（详情页）
需求是A-C那C是缓存页面，B-C那C就重新获取数据就不缓存

Answer 1

使用keep-alive中的 include 结合store使用，我现在用的你可以参考下

// 添加缓存组件：this.$store.dispatch('addCacheView', 'TargetRouterName')
// 清除缓存组件：this.$store.dispatch('deleteCacheView', 'TargetRouterName')
const  view  = {
    state: {
        cacheView: []
    },
    mutations: {
        ADD_CACHE_VIEW: (state, view) => {
            state.cacheView.push(view)
        },
        DELETE_CACHE_VIEW: (state, index) \=> {
            state.cacheView.splice(index, 1)
        }
    },
    actions: {
        addCacheView ({ commit, state }, view) {
            if (!state.cacheView.includes(view)) {
                commit('ADD_CACHE_VIEW', view)
            }
        },
        deleteCacheView ({ commit, state }, view) {
            const  index  =  state.cacheView.indexOf(view)
            if (index  >  -1) {
             commit('DELETE_CACHE_VIEW', index)
            }
        }
    }
}
export  default  view

Answer 2

用keep-alive+路由信息meta+（activated和beforeRouteLeave）两个生命周期判断下
具体看
https://www.jianshu.com/p/f34...