vue2 KeepAlive实操

需求

• 列表->详情 —缓存列表
• 详情->列表 — 恢复列表缓存
• 其他->列表 —不缓存列表

1. 注册eventbus

Vue.prototype.$eventBus = new Vue();

2. 视图文件

<keep-alive :include="cacheList">
	<router-view></router-view>
</keep-alive>
<script>
export default {
	data {
		return {
			cacheList: ['List'],
		}
	},
	mounted() {
		this.$eventBus.$on('clearKeepCache', (flag) => {
            if (flag) {
                this.cacheList = ['List'];
            } else {
                this.cacheList = [];
            }
        });
	}
}
</script>

3.

<script>
export default {
	name: 'List',
	mounted() {
		beforeRouteLeave(to, from, next) {
        	this.$eventBus.$emit('clearKeepCache', to.name === 'Info');
        	next();
    	},
	}
}
</script>