App开发-使用keepAlive，解决页面缓存是否动态刷新的问题

最新推荐文章于 2024-06-17 09:50:46 发布

L_不觉晓晓

最新推荐文章于 2024-06-17 09:50:46 发布

阅读量1.3k

点赞数 1

分类专栏： VUE3 笔记 App开发文章标签： vue js app

本文链接：https://blog.csdn.net/m0_48209314/article/details/117804898

版权

本文探讨了在App开发中如何使用Vue的keepAlive特性保持页面状态，同时解决因缓存导致的动态刷新问题。通过动态判断是否需要再次请求初始化API，在onActivated钩子中实现数据更新，确保从搜索页面返回时能获取最新搜索结果。

摘要由CSDN通过智能技术生成

1、APP页面从另一个页面返回保持原有状态

我们经常使用App都知道，比如当我们从一个搜索列表进入商品详情页面，再次从商品详情页面返回列表页面肯定会停留在上次浏览的位置，如果我们再次刷新或者回到列表顶部，这样对用户的操作体验肯定是不友好的，所以我们要首先解决这个问题。

经过查证，发现在router里面有一个keepAlive，只要我们将keepAlive设置为true，他就会帮我们自动缓存记录上次获取的DOM，而不会再次去刷新数据请求新的DOM。

在router.js里面如下设置即可。

{
  path: '/user-comment',
  name: 'userComment',
  component: () => import(/* webpackChunkName: "order" */ '@/views/Order.vue'),
  meta: {
     index: 2,
     keepAlive: true,
  },
},

2、随之产生的问题

我们刚刚对某一个页面的路由设置了keepAlive等于true,这样设置我们确实解决了从详情页面返回到列表页面定位在我们上次浏览的地方，但是新的问题产生了。我在App开发负责开发搜索功能，所以我们还是以搜索功能举例，当我从搜索首页输入关键词进行搜索的时候，发现不管我输入什么搜索词都不再起作用，搜索出来的结果都是我们第一次搜索的结果，这样的原因就是因为我们给这个页面路由设置了keepAlive等于true，因为我们上面提到了它会自动帮我们缓存当前页面的DOM，还有主要的问题就是