(编辑:jimmy 日期: 2024/12/26 浏览:2)
前言
最近在写Vue项目的时候,遇到了一个问题,我从A路由使用parmas方式传参跳转到B路由,然后从B路由跳转到C路由,再从C路由返回B路由的时候,发现从A路由传到B路由的参数已经不存在了。
正文
我们都知道,vue组件进行路由跳转时,会销毁当前组件。所以从其他路由返回当前路由时,当前路由会重新执行生命周期钩子函数。这就导致了上述问题,A路由传到B路由的参数没了。
当遇到这种问题的时候,我们会首先想到,我们能不能让B路由的数据保存下来呢?这就不得不提到Vue的一个组件了,它就是keep-alive。
keep-alive
<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
在路由出口加上:
<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路由的时候,不会执行销毁操作:
可以看到,在返回order路由也就是上述B路由的时候,前一个页面传递过来的数据仍然保留了下来。
<keep-alive>带来的问题
在项目继续进行的时候,出现了另一个问题,当我从选择地址页面选择地址,将地址的id存储到localstorage中,返回order页面并在created生命周期中取到id再进行接口请求,想要拿到这个id相关的地址信息的时候,发现接口请求并未发出:
created() { this.userId = JSON.parse(localStorage.getItem("user")).userId if (JSON.parse(localStorage.getItem("addressId"))) { this.addressId = JSON.parse(localStorage.getItem("addressId")) } this.getAddress() },
于是我在里面加上console.log(1)测试,发现也没有东西打印出来,然后我把created改成mounted,依旧是这样。
原因
由于<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 生命周期钩子函数实现相关操作。