vue 实现详情页返回列表页保持原来页码

最新推荐文章于 2024-07-04 17:30:46 发布

小不着调°

最新推荐文章于 2024-07-04 17:30:46 发布

阅读量2.3k

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_33414883/article/details/106240950

版权

本文介绍了如何在Vue中利用keep-alive组件来实现在从详情页面返回列表页面时，保持原来的页码状态，避免数据重新渲染。主要步骤包括在App.vue配置，标记需要缓存的路由meta信息，以及在详情页设置返回操作。

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

vue 中有 keep-alive 是 vue内置组件可以保留原状态避免重新渲染数据了
1.在App.vue里面

<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小不着调°

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

element-table表格点击详情页返回之前的页码

酷酷的旭

07-27

6879

我这里用到的本地存储，然后可以直接把这段代码粘到请求前后，适当的位置上就可以实现，代码在图片下面~~ *欢迎大家留言交流~~~~* //详情页 <el-button size="small" @click="goBackList">返回</el-button> goBackList() { localStorage.setItem('nowPage', JS...

vue项目详情页返回列表，记录之前信息

qq_20350847的博客

04-20

943

需求场景：我们在开发后台管理系统的时候，经常会遇到这样的问题，我刚通过筛选条件筛选出来了一批数据，然后我点击到了第二页，点击进入了对应数据的详情页，查看完数据后，返回列表，这个时候之前筛选的信息不见了，页码也回到了第一页；这个时候如果需要再筛选，再重复操作的话，这样的体验是非常差的，很浪费时间；最好的体验是：我去详情之前是怎样的页面，详情返回后就是怎样的页面，保留之前的筛选条件、列表数据、分页信息等，甚至刷新也都保存之前的筛选条件；但是如果我从其他模块进入，我希望筛选条件等是清空的，从第一页开始；

参与评论您还未登录，请先登录后发表或查看评论

Vue使用keep-Alive实现从详情页返回到列表页，还能记住当前的page页码以及切换的tab选项

m0_59157023的博客

05-11

1208

到了这一步的时候以为缓存成功啦，然后试了一下(list.vue)查询某个字段：比如供应商，查询之后点击订单号跳转进详情页(detail.vue)，然后再返回订单列表页(list.vue)的时候依然重新请求数据，keep-alive设置页面缓存不起作用，这是怎么回事呢？为了在其他页面比如首页(home.vue)进入订单的列表页面(list.vue)，刷新页面中的列表数据和查询条件，我们将在activated钩子函数中挂在页面初次进入时的请求数据。1.首先，设置路由文件:route.js。

vue学习经验总结（实现详情页点击返回列表页保持原来页码）

huhuhuja

11-09

665

1.在app.vue页面中设置是否缓存 2.在router路由里面，设置对应的列表页设置是否缓存，通过meta判断 3.在详情页的返回事件写入 toback() { this.$router.back(-1); },

vue跳转详情页后返回上一页保留上一页的页码以及查询参数

最新发布

weixin_47961174的博客

07-04

625

自己做的一个小笔记

vue 路由跳转详情页，返回时页码依然在当前页

小秋的博客

11-01

915

到这里会遇到一个问el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题，这是element的分页bug，使用v-if绑定分页。在当前的表格的vue文件table.vue中写，因为我这个table,vue是子组件，导致beforeRouteLeave无效，watch监听路由还获取不到from值，所以采用以下方法，在父组件中使用beforeRouteEnter路由钩子。首先项目中使用的是element-ui，用的el-table,el-pagination。

vue保留页码

weixin_47353884的博客

01-07

610

可以使用 v-bind 指令将组件的 props 绑定到路由参数，然后通过路由参数来保留页码例如，假设你有一个组件 PaginatedList，它接受一个 page prop，表示当前页码。你想要在路由跳转时保留当前页码。示例：二、实现方法 1. 绑定到路由参数在组件中使用 v-bind 指令将 page prop 绑定到路由参数：这样，当你在应用中跳转到 /paginated-list/2 时，PaginatedList 组件的 page prop 将被设置为 2，并且在路由跳转时页码将被保留。代码

vue 详情页返回列表，过滤查询条件保留

sika-master的博客

06-17

3729

列表---详情---列表，过滤条件不清空

vue中详情页改变状态使列表页保存页码的基础上刷新状态

weixin_46513664的博客

01-07

1190

最近在项目中遇到了一个需求，在详情页改变列表页也存在的状态时，列表页需要在保持页码的状态下刷新状态，但是这个需求是在路由中不携带页码而且没有把页码存在storage的基础上实现的，于是小仙女查阅各大资料均没有头绪，最终经过反复试验测试，终于有了思路！

使用vuex记住当前页面页码信息，以便从详情页返回列表页时能还原到上一次页面

商务合作 / 项目定制开发 / 前端一对一培训、答疑

06-13

1867

从以上代码中，你也发现了，其实记住当前页码是使用了`vuex`的这个能保留全局变量的特性，与当前`elementUI`等前端`UI`框架无关，意味着你可以用于任何`vue`项目中

vue 详情跳转至列表页实现列表页缓存

10-17

主要介绍了vue 详情跳转至列表页实现列表页缓存，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue如何通过id从列表页跳转到对应的详情页

08-27

主要介绍了vue如何通过id从列表页跳转到对应的详情页 ,需要的朋友可以参考下

vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法

大哼的小世界

08-22

4228

vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> <div id="app"> <keep-alive > <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> &lt

简单实现从列表页到详情页再返回留在之前的页码

weixin_55553106的博客

05-18

897

首先列表页到详情页或者编辑页面的跳转 this.$router.push({ path:'addNotice', query:{ id:a, //分页数据 num:this.pageNum, size:this.pageSize } }) 列表页或者详情页里面的返回按钮 this.$router.push({ path: "noticeList, query: { num: this.$route.query.num, size: th

【Vue】------- Vue 实现返回上一页

皮皮冰要做大神

07-29

2945

1. 怎么用vue返回上一页呢！看如下代码示例: <div class="caozuo-heander"> <div> <i class="icon iconfont icon-return " @click="go"></i></div> <div> <...

从详情页跳转到列表，如何保持详情页的状态

weixin_42147400的博客

12-16

513

经常遇到这种需求，从详情页跳转回来的时候，需要保持列表页面之前的状态，解决方案如下： 1.在路由中设置meta字段，并且增加一个flag，控制是否keep-alive，例如： meta: { keep: true } 在这里插入图片描述](https://img-blog.csdnimg.cn/20201216175842531.png) 2，路由跳转入口 3.列表页 //修改列表页的meta值，false时再次进入页面会重新请求数据。 beforeRo

解决vue列表页跳转到详情页，返回列表页时不刷新、保持原来的状态的方法

k0933的博客

11-27

5985

先判断isBack的状态，如果为false,则说明当前不是从详情页进来的（可能从其他菜单或则编辑页进入，需要更新数据），就更新列表数据（自己的列表数据逻辑，并将分页设为1），之后将isBack设置为false。1、列表页进入详情页，再从详情页返回时，列表页不刷新，比如列表当前分页为第二页，点击进入详情页，再从点击返回按钮，返回到列表页时，列表页保持在第二页。2、列表页进入编辑页，再从编辑页返回时，列表页刷新。3、从其他菜单进入列表页时，列表页刷新。

element-UI实现分页器切换页码后，点击某行就行跳转，希望返回后，页码还是保持在刚才浏览的位置