keepAlive学习之路

#想达到的效果
一个不需要的缓存页面A（有一个按钮）
一个需要缓存的页面B
配合keepAlive、vuex实现
正常切换A|B组件，B一直有缓存，点击A界面按钮的时候清除B界面缓存，但是B界面离开的时候还得有缓存

尝试1：利用组件路由控制beforeRouteEnter、beforeRouteLeave来控制vuex需要缓存的组件。
这时候遇到问题，再点击按钮去B界面的时候，B界面缓存清除，但是再次切到B组件，有上上次的缓存

尝试2：尝试利用keepAlive 内部的属性，$vnode.parent.componentInstance.keys等，路由清除缓存，最后发现在非缓存页面A，$vnode.parent属性没有值，它可以算keepAlive的内置配置，keepAlive不包裹的界面是找不到的，所以希望破灭了

尝试3：在一个网友陪伴下，慢慢容错中达到了效果
进入B页面前判断是否要清除缓存

router.beforeEach((to,from,next)=>{
	if(to.params&&to.params.from&&to.params.from=='first') {
		console.log('进来了')
		store.commit('delCashChange')//清除缓存
	}
	next()
})

配合路由监听再次告诉vue，B这个界面要缓存

watch:{
	'$route' () {
		this.$store.commit('addCashChange')//添加缓存
	},
},

就是实现了效果。
遗留问题(已解决，效果等同全局路由。一开始觉得没实现的原因可能历史缓存问题：每次改路由后，重启下界面来验证修改比较稳妥。)
如果把全局路由处代码换城A页面处写入如下代码，又会出现问题一情况，如果有大佬知道，希望给点灵感。

beforeRouteLeave(to, from, next){
	if(to.params&&to.params.from&&to.params.from=='first') {
		store.commit('delCashChange')
	}
	next()
},

补充
如果多个页签打开详情页，这时候需要缓存，可以给router-view绑定一个key，然后再用keep-alive 标签包裹

<keep-alive>
            <router-view class="avue-view" :key="$route.fullPath"/>
</keep-alive>

建议
1.keepAlive问题通过监听路由+vuex+keepAlive就可以实现，最好熟悉下精通下路由守卫，有助更好开发。
2.keepAlive最好使用include或者exclude,使用v-if实现本功能，会先展示新界面，瞬间又回到缓存界面
推荐

<keep-alive :include="cash">
	<router-view></router-view>
</keep-alive>

不推荐

<keep-alive>
   <router-view class="avue-view" v-if="$route.meta.keepAlive" />
 </keep-alive>
 <router-view class="avue-view" v-if="!$route.meta.keepAlive" />