vue.js3: 從詳情頁返回列表頁,顯示跳轉前列表而不是第一頁(vue@3.2.26)

一，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://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/29/vue-js3-cong-xiang-qing-ye-fan-hui-lie-biao-ye-xian-shi/

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

二，測試效果

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