项目中遇到的问题

在新增页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()
  },

你可能感兴趣的:(项目中遇到的问题)