vue项目中keep-alive的使用，从详情页返回列表时保存浏览位置
最近在做移动端前端项目中，需要实现以下场景： 1.在页面查询列表，进入详情页时，返回需要页面返回到上次浏览的位置 2.由于查询列表获取的数据可能会短时间改变，如果前端长时间缓存数据，并不符合业务要求。 3.我在进入详情页时可以修改列表的数据，返回时滚动到，用户看到的应该是最新的数据 4. ...
原文：vue详情页回到列表页定位到之前位置（keep-alive）
将需要缓存的页面路由加上meta属性： 在app.vue里使用keepalive 将 改为 路由守卫 如果要用局部守卫的话： 列表页： 详情页： 第三步用路由守卫去改变 keepAlive 的值会有bug， 优化一下： data中声明key: ，绑定到组件上，当key值发生更改时会触发组件更新 列表页使用activated生命周期进行判断，如果是从add或edit回来那么重新请求接口，并且更改k ...
2021-05-27 16:36 0 1171 推荐指数：
相关推荐
keep-alive 实现从列表页到详情页，然后再回到列表页并保持原来列表页的页码数，并且只刷新数据
思路： keep-alive应用场景介绍 <keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。结合router,缓存部分页面 activated 和 deactivate 生命周期钩子 include string或正则，只有名称匹配的组件 ...
vue + keep-alive 详情跳来回列表页 实现列表页刷新数据并缓存
甲爸爸提了一个需求，希望公众号内的商城能够像app一样，从商品详情页跳转至列表页及其他列表页时，可以实现列表页缓存（数据不刷新、位置固定到之前点的商品的位置） 本来想着scrollBehavior应该可以满足，但是实际操作中发现：如果列表带着分页，位置是不会定位到点击的位置的 在网上转了 ...
列表页到详情页，从详情页返回之前列表页的位置
背景： 对于一般采用同样的技术栈开发的多页面应用来说，可能遇到的状况如下： h5上拉刷新来实现分页，当有很多页的话，点击列表某一页去详细，然后从详情返回上一页，可能刷新上一页，位置不能保持，体验不好 列表使用a链接过去的，详情使用window.history.go ...
vue从详情页回到列表页，停留在之前的tab上
一、pc端 pc端一般返回时有返回按钮，这种情况下，在跳转到详情页时通过query或params将当前tab的name或下标传过去，在返回时再通过query或params传回来 二、移动端 移动端一般返回时没有返回按钮，此时无法通过pc的那种方式。可以通过vuex ...
列表页跳转到详情页，点击返回 回到原位置
新闻流和游戏列表需要实现 跳转到详情页后返回，回到原位置。 新闻流： 新闻资源支持iframe， 利用同源页面跳转，浏览器不会刷新页面，通过在iframe中打开新闻详情页实现。 location.history.pushState( {} , "title ...
react 从商品详情页返回到商品列表页，列表自动滚动上次浏览的位置
接口数据， 如果是商品详情页返回到商品列表页的话就用缓存数据，并且滑到到上次浏览的位置。 一：数 ...
vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事
实践场景需求 产品列表中，滚动到一定位置的时候，点击查看产品信息，后退之后，需要回到原先的滚动位置，这是常见的需求 所有页面均在router-view中，暂时使用了keep-alive来缓存所有页面，所以进入不同分类的产品列表，和不同的产品详情页面，需要更新数据 首先注意 ...