vue页面缓存，keep-alive第一次无效的解决方法

Posted 2023-04-10

参考技术A 方法二：使用 include + beforeRouteLeave + vuex 与方法一相似，不同的地方在于，将需要缓存的组件保存到全局变量，可以在路由的钩子函数里灵活的控制哪些组件需要缓存，那些不需要缓存；跟方法一相比，不需要每次再重新初始化数据，但是需要在vuex中保存数据；

1、在创建router实例的时候加上scrollBehavior方法

2、将需要缓存的组件加在include属性里

3、在store里加入需要缓存的的组件的变量名，和相应的方法；

4、在beforeRouteLeave钩子函数里控制需要缓存的组件

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

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

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

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

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

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

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

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

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