vue中使用keep-alive的问题

简介: vue中使用keep-alive的问题

问题: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的值

目录
相关文章
|
1天前
|
缓存 监控 JavaScript
如何优化 Vue 的执行流程?
【10月更文挑战第2天】
91 59
|
1天前
|
JavaScript
vue知识点
vue知识点
13 5
|
2天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
3天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
11 1
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
14 2
|
4天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
13 1
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
12 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
3天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
11 0
|
3天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
10 0
|
4天前
|
JavaScript
vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
vue尚品汇商城项目-day01【6.Footer组件的显示与隐藏】
15 0