在新增页A中,可以跳转到新增页B中,在B页面新增数据完成后,返回A页面,并将B页面中新增的数据选中,且保留A页面中所填写的数据!

页面描述.png
A页面代码:
beforeRouteEnter(to, from, next) {
next(vm => {
// 因为当钩子执行前,组件实例还没被创建
// vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
if (from.name === 'nameB') { // 由B页面回来
vm.todoServeTimeList()
}
})
},
beforeRouteLeave(to, from, next) {
if (to.name === 'nameB') { // 前往B页面
//因为想将form表单这个对象存入session,所以先将其转为JSON字符串
const form = JSON.stringify(this.form)
sessionStorage.setItem('agrementForm', form)
} else {
sessionStorage.removeItem('agrementForm')
}
next()
},
methods: {
async todoServeTimeList() { // 先进行同步,获取下拉框数据
await this.getServeTimeList()
this.form = JSON.parse(sessionStorage.getItem('agrementForm'))
this.serveTimeChange(this.form.serveTimeId)
},
getServeTimeList() { // 获取下拉框数据
return serveTimeList({ inUse: 1 }).then(({ data }) => {
this.serviceTimeArr = data?.list && data?.list.map(item => {
return {
value: item.timeId,
label: item.timeName,
serveTimeVersion: item.timeVersion,
distance: item.distance,
timeType: item.timeType
}
})
})
}
}
B页面
beforeRouteLeave(to, from, next) {
if (to.name === 'nameA') {
//先将JSON字符串转换为为对象,然后再次进行存储
const agrementForm = JSON.parse(sessionStorage.getItem('agrementForm'))
agrementForm.serveTimeId = this.serveTimeId
const form = JSON.stringify(agrementForm)
sessionStorage.setItem('agrementForm', form)
}
next()
},