vue中使用keep-alive的问题（1）

问题：A页面—>B页面，A页面 —>C页面。其中B页面返回A页面时，A页面不刷新。C页面返回A页面时，A页面刷新。

解决思路：应该都能想到如果想要缓存应该要使用keep-alive，问题是在C返回A页面的时候A页面刷新怎么处理。那么我们有两个解决思路：

1. 就是在离开A进入C的时候，销毁组件A,那么再返回A就是新组件，
2. 在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写法

vue3写法

备注即使使用keep-alive返回页面的时候，滚动条滚动的位置也是无法被缓存的，需要自己处理可以在activated函数中给滚动的元素设置scrollTop的值

【信息由网络或者个人提供，如有涉及版权请联系COOY资源网邮箱处理】