页面刷新问题

A页面部分代码(写法一)当从一个A页面点击某条数据之后跳转到B页面，根据A页面传来的数据作为查询条件，但是单刷新页面B时发现A页面的数据没了，导致B页面的接口调用出错。

A页面部分代码(写法一)

<el-table-column label="开发商名称" width="180" prop="devpName" show-overflow-tooltip>
  <template slot-scope="scope">
    <span @click="developerDetails(scope.row.devpId)" class="edit-operation" style="color: #20A0FF ">{{scope.row.devpName}}</span>
  </template>
</el-table-column>


developerDetails(devpId) {
   this.$router.push({
      name: 'DeveloperDetailsTable',
      query: {
        devpId,
        previousStepFlag: '2',
      },
   });
},

A页面部分代码(写法2)

<el-table-column label="开发商名称" width="180" prop="devpName" show-overflow-tooltip>
  <template slot-scope="scope">
    <span><router-link class="caseTittle" :to="{ path: '/DeveloperDetailsTable/index', query: { exampleId: scope.row.exampleId,previousStepFlag: '2',  }}">{{ scope.row.title}}</router-link></span>
  </template>
</el-table-column>

B页面部分代码

mounted() {
  this.devpId = this.$route.query.devpId;
  this.previousStepFlag = this.$route.query.previousStepFlag;
  this.getDeveloperDetails(this.devpId);
},

当页面A的传参方法为query时刷新页面B参数依旧存在，若传参方法为params时刷新页面B,A页面传来的参数则置空了。

如果将页面A的对象传到页面B时必须转换成字符串，否则会出现第一次跳转数据没错，刷新会报。

源码和页面如下，点击修改跳转正常，但是在修改页面点击F5刷新页面会报错

扫描二维码关注公众号，回复： 4684000 查看本文章

需要将源码改为如下

原始页面请求方法 
modifyManager(rowManagerInfo) {
      this.$router.push({
        name: 'ManagerUpdate',
        query: {
          rowManagerInfo: JSON.stringify(rowManagerInfo),
          flag: 'update',
        },
      });
    },


修改页面接收数据方法
  mounted() {
    this.form = JSON.parse(this.$route.query.rowManagerInfo);
  },

猜你喜欢