需求

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

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',beforeRouteLeave(to, from, next) {this.$eventBus.$emit('clearKeepCache', to.name === 'Info');next();},
}
</script>