问题：A页面--->B页面，A页面 --->C页面。其中B页面返回A页面时，A页面不刷新。C页面返回A页面时，A页面刷新。
解决思路：应该都能想到如果想要缓存应该要使用keep-alive，问题是在C返回A页面的时候A页面刷新怎么处理。那么我们有两个解决思路：
就是在离开A进入C的时候，销毁组件A,那么再返回A就是新组件，
在C返回A的时候重置A的数据
回顾一下组件内的路由守卫：
beforeRouteEnter：在进入路由前被调用，但在组件实例被创建之前被调用，因此无法访问组件实例。可以通过传入一个回调来获取组件实例或使用Promise来延迟进入。
beforeRouteLeave：在离开当前路由时被调用。可以用于确认是否离开页面、保存临时数据等操作。
beforeRouteUpdate：在当前路由被复用时被调用，即参数发生变化但是组件实例仍然被复用。可以在该守卫中对参数的变化作出响应。
回顾一下使用keep-alive之后会产生两个新的生命周期钩子
-activated：路由组件被激活时触发。（当进入缓存的路由组件时触发）
-deactivated：路由组件失活时触发。（当离开缓存的路由组件时触发）
页面首次进入的执行顺序：当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
好了，言归正传
尝试使用第一种解决，那么我们需要在组件离开的时候销毁，需要使用到beforeRouteLeave守卫,大致如下
beforeRouteLeave(to,from,next){
if(to.name === 'xxxx'){
//销毁组件
}
next()
}
测试之后发现存在的问题：A->B，再返回A不刷新，显示缓存内容，A->C,再返回，A刷新，但是再从A->B,再返回，就无法展示缓存内容了，打印发现会调用mounted方法。
尝试使用第二种方法，是在进入组件的时候处理组件需要用到beforeRouteEnter守卫，大致如下
beforeRouteEnter(to,from,next){
next((vm)=>{
if(from.name === 'xxx'){
//如果发现我是从哪个页面调过来的，那么我需要重置一些什么东东
//这里的vm是可以获取到我们定义的data里面的数据的，vue3写法一样
vm.tabActivated ='1'
}
})
}
补充1：在网上也有看是使用中转页面的，感觉应该也可行。
补充2：keep-alive和router-view，在vue2和vue3有不同
vue2写法
<keep-alive>
<router-view></router-view>
</keep-alive>
vue3写法
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
备注即使使用keep-alive返回页面的时候，滚动条滚动的位置也是无法被缓存的，需要自己处理可以在activated函数中给滚动的元素设置scrollTop的值
