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

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

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

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

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

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

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

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

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

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

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

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

// 列表切换页码时保存
changePage() {
  localStorage.setItem('productPage', JSON.stringify({
    pageNum: this.pageNum,
    pageSize: this.pageSize
  }))
  this.getList()
}

// 列表初始化读取
created() {
  const cache = localStorage.getItem('productPage');
  if (cache) {
    const { pageNum, pageSize } = JSON.parse(cache);
    this.pageNum = pageNum;
    this.pageSize = pageSize;
  }
  this.getList();
}