antd vue 编辑完跳回列表原来页

情景再现

进入列表第N页，选择第M条信息，进行编辑，编辑完，要求还返回第N页。

实现原理

通过 localStorage 保存进入编辑页前的[页码]及[每页展示条数]的参数，进入编辑页，获取该参数，保存到编辑页的某个变量，再离开编辑页的方法中，将页码参数值，再通过 localStorage 赋值回去，即可实现。

示例代码

list.vue--------------------------
 <script>
    export default {
      data () {
        paginationSet: {
          onChange: page => this.onChange(page),
          onShowSizeChange: (current, pageSize) => this.ShowSizeChange(current, pageSize),
          showSizeChanger: true,
          showQuickJumper: true,
          defaultCurrent: 1,
          pageSize: 10,
          total: 0,
          hideOnSinglePage: true
        },
        listParams: {}
      },
      methods: {
        // 进入编辑页的方法
        toEdit (Id) {
          const listParams = {
            pageSize: this.paginationSet.pageSize,
            page: this.paginationSet.defaultCurrent
          }
          // 【1】将页码和每页展示数，赋予previouHospitalParams，然后存入到 localStorage
          localStorage.setItem('previouHospitalParams', JSON.stringify(listParams))
          this.$router.push({ path: '/system/EditInstitution', query: { hospitalId: Id } })
        }
      },
      created () {
        // 【4】从localStorage获取参数 previouHospitalParams 的值，赋予给分页相关的参数变量，即可实现跳转到对应页
        const previouHospitalParams = localStorage.getItem('previouHospitalParams')
        // 【5】记得用完后，将localStorage中的 previouHospitalParams 清空，方便下次使用
        localStorage.setItem('previouHospitalParams', '')
        if (previouHospitalParams !== '' && previouHospitalParams !== null) {
          this.listParams = JSON.parse(previouHospitalParams)
          this.paginationSet.defaultCurrent = this.listParams.page
          this.paginationSet.current = this.listParams.page
        } else {
          this.listParams.pageSize = this.paginationSet.pageSize
          this.listParams.page = 1
        }
        this.listsApi()
      }
    }
 </script>

 edit.vue-------------------------
 <script>
     export default {
       data () {
         previouHospitalParams: {}
       },
       created () {
         // 【2】从localStorage获取 previouHospitalParams 参数，存入编辑页的变量 previouHospitalParams
         this.previouHospitalParams = localStorage.getItem('previouHospitalParams')
       },
       beforeRouteLeave (to, from, next) {
         // 【3】当页码要离开时，给 localStorage 中的 previouHospitalParams，赋值【2】中的参数
         localStorage.setItem('previouHospitalParams', this.previouHospitalParams)
       }
     }
 </script>

结语

具体的实现步骤，代码中【1】【2】【3】【4】【5】已说清楚，其实，仔细想一下，还是值的传递，只不过换了个传参的容器而已。