keep-alive和activated的用法

Posted 2023-04-10

参考技术A 1.<keep-alive> 是 Vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

2.activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等

接下来我们就用keep-alive 和  activated 配合 实现   电商移动端项目 中  在首页点击任意商品 进入商品详情页，返回时还在原位置的效果。

实现的效果如下：

1---进入移动端

vue使用keep-alive实现页面前进刷新,后退缓存

参考技术A vue中,我们有时候需要实现这种场景:

1.搜索页面到列表页面，需要刷新重新获取数据。

2.从详情页面返回列表页面需要记住上次浏览的状态。具体流程如下：

第一步:在路由配置文件中为列表页设置meta参数，里面包含useCatch和keepAlive

第二步:在App文件中如下设置

第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回事件的时候,将leaveTag修改为back,然后在beforeRouteLeave中如下:

第四步:在列表页的actived生命周期函数中根据useCatch字段判断是否需要缓存:

这种处理方式会有bug,打开列表页会有上次的残留停顿一下,最新文章已解决,详情请看我的最新文章。