在新增頁(yè)A中，可以跳轉(zhuǎn)到新增頁(yè)B中，在B頁(yè)面新增數(shù)據(jù)完成后，返回A頁(yè)面，并將B頁(yè)面中新增的數(shù)據(jù)選中，且保留A頁(yè)面中所填寫(xiě)的數(shù)據(jù)！

頁(yè)面描述.png

A頁(yè)面代碼：

beforeRouteEnter(to, from, next) {
    next(vm => {
      // 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
      // vm 就是當(dāng)前組件的實(shí)例相當(dāng)于上面的 this，所以在 next 方法里你就可以把 vm 當(dāng) this 來(lái)用了。
      if (from.name === 'nameB') { // 由B頁(yè)面回來(lái)
        vm.todoServeTimeList()
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    if (to.name === 'nameB') { // 前往B頁(yè)面
      //因?yàn)橄雽orm表單這個(gè)對(duì)象存入session，所以先將其轉(zhuǎn)為JSON字符串
      const form = JSON.stringify(this.form)
      sessionStorage.setItem('agrementForm', form)
    } else {
      sessionStorage.removeItem('agrementForm')
    }
    next()
  },
   methods: {
    async todoServeTimeList() { // 先進(jìn)行同步，獲取下拉框數(shù)據(jù)
      await this.getServeTimeList()
      this.form = JSON.parse(sessionStorage.getItem('agrementForm'))
      this.serveTimeChange(this.form.serveTimeId)
    },
    getServeTimeList() { // 獲取下拉框數(shù)據(jù)
      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頁(yè)面

beforeRouteLeave(to, from, next) {
    if (to.name === 'nameA') {
      //先將JSON字符串轉(zhuǎn)換為為對(duì)象，然后再次進(jìn)行存儲(chǔ)
      const agrementForm = JSON.parse(sessionStorage.getItem('agrementForm'))
      agrementForm.serveTimeId = this.serveTimeId
      const form = JSON.stringify(agrementForm)
      sessionStorage.setItem('agrementForm', form)
    }
    next()
  },