Vue框架下实现不同进入方式下控件的缓存和刷新

背景：如图所示，现在单页面有组件A（类似于TabBar），组件B，点击B组件中的内容会跳转到C组件。组件B的内容会根据A中选择的选项变化而变化，并且组件B中的内容需要缓存（因为会选择很多选项，从C组件返回时不希望这些选择消失）

现在想实现的效果是，进入C组件后，点击浏览器的后退键，B组件的缓存仍然在，但是如果我在C组件显示的情况下，点击A控件中的某一项跳转到B组件时，不需要原先的缓存，这样是比较符合一般人的操作逻辑的，然后由于B是缓存的，所以这又是一个自相矛盾的操作。

解决方法：首先，B的缓存通过<keep-alive>实现，毫无疑问，所谓的不缓存也是自己实现了重新请求数据的函数，直接调用了一遍而已，问题在于，如何判断用户是点击了浏览器的后退键还是A组件的某一项。
不考虑C组件的话，B组件的内容更新是通过组件内的导航守卫beforeRouteUpdate(to,from,next)实现的，很容易理解。那么，从C组件回来怎么办？
  一开始我的想法是通过路由判断，但是这很明显不行，因为你只要是从C进入的B，路由的跳转是一模一样的，那么，最大的区别就是点击了A组件中的某一项。我监听了A组件中的每一项的点击事件，一旦点击，执行this.$root.clickNavi=true，这里的clickNave是我在App.vue的data里添加的。然后在B组件的activated()里setTimeout(this.ResetOrNot,10)，在deactivated()里this.$root.clickNavi=false，离开B时把他重置为false，ResetOrNot函数的实现是if(this.$root.clickNavi==true){重新请求数据函数}，就是自己写的重新向后台请求数据的函数。
  这里解释一下为什么要setTimeout()，我一开始以为，我点击了之后，修改了App.vue的数据，然后B控件才去读然后判断，但是通过浏览器输出信息发现，B控件读取甚至在我修改数据之前，这是我没搞懂的地方，所以在这里设置的是10ms的延迟去读取数据，如果在这里设置5000，也就是5s，很容易就能看出，一开始的缓存还在，5s过后，重新请求的数据出现，缓存的选择消失。10ms下，人眼看不出来，这应该不是最好的解决方法，但是暂时效果还可以，所以记录一下，这是想了一上午加半个下午的成果，掉了5根头发。菜鸡需要学习！