首页 | 编程 | Java

Vue中keep-alive组件的深入理解

2020年08月23日 作者：karen_kujo原文

前言

最近在写Vue项目的时候，遇到了一个问题，我从A路由使用parmas方式传参跳转到B路由，然后从B路由跳转到C路由，再从C路由返回B路由的时候，发现从A路由传到B路由的参数已经不存在了。

在路由出口加上：

 <div id="app">
 <keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>
 </div>

这样一来的话，如果在路由配置里的meta项加上keepAlive属性且值为true时，当前路由就会被<keep-alive>包裹，变成一个可缓存路由，路由配置：

 {
 path: '/order',
 name: 'Order',
 component: () => import('@/views/order/order'),
 meta: {
 keepAlive: true // 需要被缓存
 }
 }

在离开order路由的时候，不会执行销毁操作：

原因

由于<keep-alive>所包裹的路由具有缓存能力，所以在路由跳转的时候并没有销毁，所以返回来的时候不会执行相关生命周期函数。那么，如果我需要在返回的时候执行例如接口请求之类的操作该怎么办呢？
解决办法

方法一

在需要缓存的页面中使用路由中的beforeRouteEnter方法，只要跳转到了这个路由，这个方法就会执行，在路由跳转前执行相关操作：

 beforeRouteEnter(to, from, next) {
  console.log('from', from)
  next(vm => {
  if (from.path == "/selectAddress") {
   // 选择收货地址后返回页面更新收货地址
   vm.addressId = JSON.parse(localStorage.getItem("addressId"))
   vm.getAddress()
  }
  })
 }

vm相当于this，由于路由守卫在导航确认前被调用,因此即将登场的新组件还没被创建，所以直接访问this是访问不到的。

方法二

使用activated生命周期钩子函数，这个函数在被 <keep-alive> 缓存的组件激活时调用。

 activated () {
  this.addressId = JSON.parse(localStorage.getItem("addressId"))
  this.getAddress()
 },

同样能实现效果。

这里由于我这个页面还需要别的页面跳转过来进行相关操作，要进行路由判断，所以使用的第一种方法。

总结

Vue的 keep-alive 组件可以实现组件数据缓存功能，但是使用时要注意，在组件未销毁时去到当前组件，组件的部分生命周期钩子函数不会执行。这时可以使用 路由守卫 或者是 activated 和 deactivated 生命周期钩子函数实现相关操作。

到此这篇关于Vue中keep-alive组件的深入理解的文章就介绍到这了,更多相关Vue中keep-alive组件内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接