页面弹框中内容点击跳转，返回希望弹框操作依然在

最新推荐文章于 2023-12-04 21:48:59 发布

宝敲

最新推荐文章于 2023-12-04 21:48:59 发布

阅读量777

点赞数 2

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_67778061/article/details/126776517

版权

首先我们的思路是，给每个弹框组件加上一个唯一标识用props去接收，然后再要跳转的时候，把他给带到下个页面，下个页面点击返回的时候，把这个标识给带回来，（页面的弹框内容跳转肯定是需要id的，我们在返回这里还需要携带上个页面点击的id,这个id我的项目是可以直接从vuex里面拿到的，这时候我直接把它也一起返回回去），然后点击返回的时候给到刚刚页面的一个id和一个我们保存的唯一标识，最后在返回的页面中判断this.$route.params是否不为{}，如果不为空就直接调用你的弹框方法，并携带那个id就可以了，下面看我的代码。

  <teacher-construction-table
      title="各班任教情况总览"
      :permis="['jtClassTeaching:export']"
      :customStyle="{ width: '40%', left: '45%', top: '24px' }"
      :bordered="false"
      :isExport="true"
      v-model:show="previewShow2"
      :dataSource="teachData"
      :columns="teachColumns"
      :rowKey="(row) => row.NJMC + row.BJMC"
      uniqueId="groupBiShop"
    />

首先我们在弹框组建中添加唯一标识，uniqueId

  props: [
    'title',
    'permis',
    'customStyle',
    'show',
    'bordered',
    'columns',
    'dataSource',
    'scroll',
    'isExport',
    'isFilter',
    'uniqueId',
  ],

在子页面用props接收

    this.$router.push({ name: toname, params: this.uniqueId ? { uniqueId: this.uniqueId } : {} })

再要跳转的地方添加标识

最后我们在返回按钮的地方添加如下操作，params是我们要携带的参数

    let { uniqueId, schoolId } = this.$route.params
    console.log(this.$route.params)
    if (uniqueId) {
      if (uniqueId === 'groupBiShop') {
        this.onschoolclick({ ID: schoolId }, this)
        this.showTeachInfo()
      }
      if (uniqueId === 'groupConstruction') {
        this.showPreviewDialog()
      }
      if (uniqueId === 'groupSchoolCadre') {
        this.showAdministrativeDialog()
      }
    }

最后我们直接在created中调用即可，跳过去就有值，没跳过去的话就不进行操作，总体思路就这样。。。。

效果因为是企业项目不便观看，总之思路是没问题的，代码是没问题的，亲测