vue3+element Plus使用el-tabs标签页，页面刷新不会到默认页(2)，并且可以监听分页表格的页码和每页条数的变化

前面我们使用了localstorage存储让页面停留在当前页，现在我们换一种方式来实现它。我们可以将参数添加到路由上，这样即使页面刷新也不会改变回到默认的tab页。

一. 若当前tab页面存在带分页的表格数据，那么我们可以将当前标签页的值和表格的页码和每页条数都添加到路由上，这样页面即使刷新也不会回到第一页和默认的tab页面。

1. 在tab的内容中添加表格数据

<el-tabs
    v-model="activeName"
    type="border-card"
    class="demo-tabs"
    @tab-click="handleClick"
>
    <el-tab-pane label="收藏列表" name="MpImage">
        <pagination-table
            :data="sampleList"
            :column="tableColumn"
            :total="mpImageCount"
            v-model:currentPage="currentPage"
            v-model:pageSize="variables.pageSize"
        >
        </pagination-table>
    </el-tab-pane>
    <el-tab-pane label="我的列表" name="OriginImage">
         <pagination-table
            :data="sampleOrginList"
            :column="orginTableColumn"
            :total="originImageCount"
            v-model:currentPage="currentPage"
            v-model:pageSize="variables.pageSize"
        >
        </pagination-table>
    </el-tab-pane>
</el-tabs>

2. 在js中添加当前tab值，当前页数格的页码和每页条数添加到路由上

//获取表格数据的参数
const variables = reactive({
  first: 0,
  pageSize: 10,
});

//currentPage 为当前的页数
const currentPage = ref(1);

const route = useRoute();
const router = useRouter();

//切换tab时，将first 和currentPage恢复成默认值(当两个表格数据不同时，可能会出现页数错乱)
const handleClick = (tab: any) => {
  activeName.value = tab.props.name;
  variables.first = 0;
  currentPage.value = 1;
 //在tab切换时，将当前tab的值添加到路由上
  router.replace({
    query: {
      ...route.query,
      activeName: tab.props.name,
    },
  });
};

//通过跳转将参数添加到路由上
watch(
  [() => variables.first, () => variables.pageSize],
  ([newFirst, newPageSize]) => {
    router.replace({
      query: {
        ...route.query,
        page: Math.floor(newFirst / newPageSize) + 1,
        perPage: newPageSize,
        activeName: activeName.value,
      },
    });
  }
);

//监听currentPage值的变化，来更新表格数据
watch(currentPage, (val) => {
  variables.first = (val - 1) * variables.pageSize;
  if (query.activeName === "MpImage") {
    sampleStore.getSampleList(variables);
  } else {
    sampleStore.getOriginImageList(variables);
  }
});

//页面初始化获取表格数据
onMounted(() => {
  activeName.value = route.query.activeName || "MpImage";
  //判断是否存在page和perPage参数，如果存在就跳转至当前页
  variables.first = route.query.page
    ? (route.query.page - 1) * route.query.perPage
    : 0;
  currentPage.value = route.query.page ? parseInt(route.query.page) : 1;
  if (activeName.value === "MpImage") {
    //获取不同tab下的表格数据
    sampleStore.getSampleList(variables);
  } else {
    sampleStore.getOriginImageList(variables);
  }
});

3. 实现效果如下

 4. 总结

我们要存储表格的相关数据及tab页，只需要在当前页面使用，或者数据需要在路由间传递，使用路由参数更加合适。

页面数据需要在不同页面之间共享，使用LocalStorage是更好的选择。

所以相对于前一篇文章的使用localstorage存储，我更建议大家使用路由来存储这些数据。