将换页逻辑改为改变页面url

src/views/ClosedProject.vue

@@ -60,6 +60,7 @@ onMounted(() => {
 <script>
 import request from "../utils/request";
 import moment from "moment";
+import router from "../router";
 
 export default {
   name: "ClosedProject",
@@ -73,17 +74,35 @@ export default {
       tableData: []
     }
   },
-  mounted() {
-    this.getClosedProjects();
+  created() {
+    // watch 路由的参数，以便再次获取数据
+    this.$watch(
+        () => this.$route.query,
+        () => {
+          if(this.$route.query.currentPage)
+            this.currentPage = parseInt(this.$route.query.currentPage)
+          if(this.$route.query.pageSize)
+            this.pageSize = parseInt(this.$route.query.pageSize)
+
+          this.getClosedProjects()
         },
+        // 组件创建完后获取数据，
+        // 此时 data 已经被 observed 了
+        { immediate: true }
+    )
+  },
+
   methods: {
     // 选择一页显示多少条数据
     handleSizeChange(val) {
-      this.getClosedProjects()
+      this.redirect()
     },
     // 选择当前的是第几页
     handleCurrentChange(val) {
-      this.getClosedProjects()
+      this.redirect()
+    },
+    redirect() {
+      router.push({path: '/ClosedProject', query: { currentPage: this.currentPage, pageSize: this.pageSize }})
     },
     getClosedProjects() {
       const that = this;
@@ -93,8 +112,10 @@ export default {
         params: {
           pageCurrent: this.currentPage,
           pageSize: this.pageSize,
+          paramMap: {
             completed: true
           }
+        }
       }).then(response => {
         if(response.data.code===200) {
           //console.log(response.data.data.records)

src/views/OngoingProject.vue

@@ -27,7 +27,7 @@
         </el-table-column>
         <el-table-column min-width="10%" align="right">
           <template #default="scope">
-            <el-button :v-show="staffId===scope.row.projectCreator" type="primary" plain @click="onCloseProject(scope.row)">结项</el-button>
+            <el-button :v-show=" this.$store.state.staff.staffId===scope.row.projectCreator" type="primary" plain @click="onCloseProject(scope.row)">结项</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -71,6 +71,7 @@ export default {
   name: "OngoingProject",
   data() {
     return {
+
       total: 0,
       currentPage: 1,
       pageSize: 10,
@@ -81,22 +82,34 @@ export default {
       staffId: Number
     }
   },
+  created() {
+    // watch 路由的参数，以便再次获取数据
+    this.$watch(
+        () => this.$route.query,
+        () => {
+          if(this.$route.query.currentPage)
+            this.currentPage = parseInt(this.$route.query.currentPage)
+          if(this.$route.query.pageSize)
+            this.pageSize = parseInt(this.$route.query.pageSize)
+
+          this.getProjects()
+        },
+        // 组件创建完后获取数据，
+        // 此时 data 已经被 observed 了
+        { immediate: true }
+    )
+  },
   mounted() {
-    this.staffId = localStorage.getItem('staffId');
-    this.getProjects();
-
-
   },
   methods: {
 
     // 选择一页显示多少条数据
     handleSizeChange(val) {
-      console.log('handleSizeChange:'+val)
-      this.getProjects();
+      this.redirect()
     },
     // 选择当前的是第几页
     handleCurrentChange(val) {
-      this.getProjects();
+      this.redirect()
     },
     onCloseProject(row) {
       request({
@@ -118,6 +131,9 @@ export default {
         console.log(error)
       })
     },
+    redirect() {
+      router.push({path: '/', query: { currentPage: this.currentPage, pageSize: this.pageSize }})
+    },
     getProjects() {
       const that = this;
       request({
@@ -125,7 +141,10 @@ export default {
         method: 'get',
         params: {
           pageCurrent: this.currentPage,
-          pageSize: this.pageSize
+          pageSize: this.pageSize,
+          paramMap: {
+            completed: false
+          }
         }
       }).then(response => {
         if(response.data.code===200) {