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刷新页面会报错
需要将源码改为如下
原始页面请求方法
modifyManager(rowManagerInfo) {
this.$router.push({
name: 'ManagerUpdate',
query: {
rowManagerInfo: JSON.stringify(rowManagerInfo),
flag: 'update',
},
});
},
修改页面接收数据方法
mounted() {
this.form = JSON.parse(this.$route.query.rowManagerInfo);
},