当前位置：首页 > news >正文

Vue2 编辑返回保留分页页码解决方案

news 2026/6/23 2:40:54

Vue2 编辑返回保留分页页码解决方案

问题根源

this.$router.back()只是单纯回退历史记录，列表页分页、搜索筛选、页码是存在组件 data 里的，路由回退后组件会重新加载，丢失之前分页状态。

四种主流方案（按推荐程度排序）

方案1：路由传参（最简单，无需缓存）

1. 列表页跳转编辑时，带上当前分页参数

// 列表页 点击编辑handleEdit(row){constpage=this.pageNum;// 当前页码constsize=this.pageSize;// 每页条数this.$router.push({path:`/product/edit/${row.id}`,query:{page,size}// 把分页存在query})}

2. 编辑页保存时，携带页码返回列表

// 编辑确认按钮asyncsubmit(){awaitapi.save(this.form);// 获取跳转过来时携带的分页参数const{page,size}=this.$route.query;if(page){// 跳回列表并带上分页，自动加载对应页this.$router.push({path:'/product/list',query:{page,size}})}else{this.$router.back();}}

3. 列表页 created 读取 query 恢复分页

created(){// 路由带分页则赋值if(this.$route.query.page){this.pageNum=Number(this.$route.query.page);this.pageSize=Number(this.$route.query.size);}this.getList();// 重新请求对应页码数据}

优点：简单无副作用；缺点：url会拼接分页参数

方案2：keep-alive 缓存列表组件（最优体验）

页面不会重新请求，直接保留上次滚动、分页、筛选状态

1. 路由配置开启缓存

<!-- App.vue / 路由出口 --> <router-view v-if="$route.meta.keepAlive" keep-alive></router-view> <router-view v-else></router-view>

2. router/index.js 给列表路由加标记

{path:'/product/list',name:'ProductList',component:ProductList,meta:{keepAlive:true}// 标记需要缓存},{path:'/product/edit/:id',component:ProductEdit}

3. 编辑完成直接回退即可

submit(){awaitsaveApi();this.$router.back();// 列表组件被缓存，页码数据全部保留}

补充：如果需要编辑完强制刷新列表

监听activated钩子，判断是否从编辑页返回：

// ProductList.vueactivated(){// 判断上一页是编辑页，刷新数据if(this.$route.meta.fromEdit){this.getList();this.$route.meta.fromEdit=false;}}

跳转编辑时打标记：

handleEdit(){this.$route.meta.fromEdit=true;this.$router.push(`/product/edit/${id}`)}

方案3：Vuex / Pinia 存储分页状态（多页面共用）

适合多处进入编辑、需要全局保存分页

store 定义分页变量

state:{productPage:{pageNum:1,pageSize:10}},mutations:{setProductPage(state,payload){state.productPage=payload}}

列表每次请求前更新store

this.$store.commit('setProductPage',{pageNum:this.pageNum,pageSize:this.pageSize})

列表 created 读取store恢复

created(){constpage=this.$store.state.productPage;this.pageNum=page.pageNum;this.pageSize=page.pageSize;this.getList();}

方案4：本地存储 localStorage（刷新页面也不丢失）

// 列表切换页码时保存changePage(){localStorage.setItem('productPage',JSON.stringify({pageNum:this.pageNum,pageSize:this.pageSize}))this.getList()}// 列表初始化读取created(){constcache=localStorage.getItem('productPage');if(cache){const{pageNum,pageSize}=JSON.parse(cache);this.pageNum=pageNum;this.pageSize=pageSize;}this.getList();}