一，js代码:

OrderList.vue:

<template>
  <div>
    <el-table
        :data="tableData"
        border
        row-key="UserId"
        stripe
        style="width: 100%"
    >
      <el-table-column label="订单ID" min-width="100" prop="orderId"></el-table-column>
      <el-table-column label="订单编号" min-width="100" prop="orderSn"></el-table-column>
      <el-table-column label="下单时间" min-width="100" prop="addTime"></el-table-column>
      <el-table-column label="订单金额" min-width="100" prop="allPayPrice"></el-table-column>
      <el-table-column label="订单状态" min-width="100" prop="orderStatusStr"></el-table-column>
      <el-table-column fixed="right" label="操作" width="280">
        <template  v-slot="scope">
          <router-link :to="'/order/orderdetail?orderid='+scope.row.orderId"  class="logo-url">
            <el-button style="margin-left:5px;" icon="el-icon-edit"  size="small" type="primary">订单详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--  page -->
    <el-pagination
        :current-page="page"
        :page-size="pagesize"
        :page-sizes="[1, 2, 5, 10]"
        :style="{float:'right',padding:'20px'}"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
 
<script>
import {ref,onUnmounted} from "vue";
import {ElMessage} from "element-plus";
import {apiOrderList} from "@/api/api";
import { useRouter} from "vue-router";
export default {
  name: "OrderList",
  setup() {
    //console.log();
    const tableData = ref([]);
    const page = ref(0);
    const pagesize = ref(0);
    const total = ref(0);
    const router = useRouter();
 
    //从sessionStorage得到当前要显示的页数
    const getPage = () => {
     let sessionPage = sessionStorage.getItem('orderListPage');
      if (sessionPage != null) {
        page.value = sessionPage
      } else {
        page.value = 0
      }
    }
    getPage();
 
    //如果不是详情页，则清除记录的当前页码
    onUnmounted(() => {
      if (router.currentRoute.value.path == "/order/orderdetail") {
          //不清除
      } else {
        sessionStorage.removeItem('orderListPage')
      }
    })
 
    //得到商品列表
    const getorderlist = async () => {
      apiOrderList({
        page:page.value,
        pagesize:pagesize.value,
      }).then(res => {
        console.log("this is res:")
        console.log(res)
        if (res.code == 0) {
 
          console.log(res.data);
          tableData.value = res.data.list;
          page.value=res.data.page;
          pagesize.value=res.data.pagesize;
          total.value = res.data.total;
 
        } else {
          //alert();
          ElMessage.error("数据获取失败:"+res.msg);
        }
      }).catch((error) => {
        // error
        console.log(error)
      })
    };
    getorderlist();
 
    //翻页:修改每页数量
    const handleSizeChange = (val) => {
      pagesize.value = val
      getorderlist()
    }
 
    //翻页:修改当前页，注意写入到sessionStorage
    const handleCurrentChange = (val) => {
      page.value = val
      sessionStorage.setItem('orderListPage',val);
      getorderlist()
    }
 
    return {
      tableData,
      page,
      pagesize,
      total,
      handleSizeChange,
      handleCurrentChange,
    }
  }
}
</script>
 
<style scoped>
 
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

1,跳转到详情页 在列表页: 进入详情: 返回后仍然是第二页   2,跳转到其他页面: 再进入订单列表: 此处默认已恢复显示第一页

三，查看vue.js的版本:

liuhongdi@lhdpc:/data/vue/demo1$ npm list vue
demo1@0.1.0 /data/vue/demo1
├─┬ @vue/cli-plugin-babel@4.5.15
│ └─┬ @vue/babel-preset-app@4.5.15
│   └── vue@3.2.26 deduped
├─┬ element-plus@1.2.0-beta.6
│ ├─┬ @element-plus/icons-vue@0.2.4
│ │ └── vue@3.2.26 deduped
│ ├─┬ @vueuse/core@7.4.1
│ │ ├─┬ @vueuse/shared@7.4.1
│ │ │ └── vue@3.2.26 deduped
│ │ ├─┬ vue-demi@0.12.1
│ │ │ └── vue@3.2.26 deduped
│ │ └── vue@3.2.26 deduped
│ └── vue@3.2.26 deduped
└─┬ vue@3.2.26
  └─┬ @vue/server-renderer@3.2.26
    └── vue@3.2.26 deduped