页面的跳转

一级页面跳转到二级页面

在需要跳转的地方绑定一个方法

<div class="secondContent">
        <div v-for="(item, index) in listData" :key="index" @click="jumpDetails(item)">
          <div v-if="item.lightStatus === 'red'" class="common red">
            <div class="red1"><svg-icon icon-class="wonring" /></div>
            <p>在办逾期数<span style="color:#F44336;">{{ total0 }}</span></p>
          </div>
          <div v-else-if="item.lightStatus === 'yellow'" class="common yellow">
            <div class="yellow1"><svg-icon icon-class="suggestion" /></div>
            <p>存在困难任务<span style="color: #FF9F00;">{{ total1 }}</span></p>
          </div>
          <div v-else-if="item.lightStatus === 'green'" class="common green">
            <div class="green1"><svg-icon icon-class="meeting" /></div>
            <p>其他在办任务<span style="color: #17A514;">{{ total2 }}</span></p>
          </div>
        </div>
      </div>

标题是写死了，通过v-for遍历数组和v-if绑定标题的数据，就可以通过点击获取相应的信息。

绑定的方法

// 跳转到第二级页面
    jumpDetails(item) {
      console.log(item)
      switch (item.lightStatus) {
        case 'red':
          this.status = 2
          break
        case 'yellow':
          this.status = 3
          break
        case 'green':
          this.status = 1
          break
        default:
          return
      }
      console.log('status', this.status)
      this.goPage({ status: this.status, display: 'one' })
    },

将要传递的值给跳转页面函数中
跳转页面方法

goPage(params) {
      console.log('1422', params)
      this.$router.push({ path: '/details2', query: params })
    }

跳转到相应的页面，然后将值也传过去

在二级页面中

在获取数据的方法中，将传过来的值保存到当前文件

getHandleDataDetail() {
      this.nowA = this.$route.query
      console.log('1213', this.nowA.lightStatus)
      console.log('45', this.form.name)
      // one代表是批示落实总数下面的框跳转，two代表是在办任务逾期排名率
      if (this.nowA.display === 'one') {
        const data = {
          topicCode: 'instructions',
          lightStatus: this.nowA.status,
          pageSize: this.pageData.rows,
          pageNum: this.pageData.page,
          dutyUnitId: this.form.post,
          taskName: this.form.name
        }
        getHandleDataDetail(data).then((res) => {
          console.log('143', res)
          this.detailsData = res.data.data
          this.detailsData1 = JSON.parse(JSON.stringify(this.detailsData))
          console.log('test', this.detailsData[0].id)
          this.pageData.total = res.data.total
          console.log('total', this.pageData)
          this.flag = true
        }).catch((err) => {
          console.log('err', err)
        })
      } else if (this.nowA.display === 'two') {
        const data = {
          topicCode: 'instructions',
          lightStatus: this.nowA.lightStatus,
          pageSize: this.pageData.rows,
          pageNum: this.pageData.page,
          dutyUnitId: this.form.post ? this.form.post : this.nowA.dutyUnitId,
          taskName: this.form.name
        }
        getHandleDataDetail(data).then((res) => {
          console.log('1433', res)
          this.detailsData = res.data.data
          this.dutyUnitAb = res.data.data[0].dutyUnit
          this.detailsData1 = JSON.parse(JSON.stringify(this.detailsData))
          console.log('test', this.detailsData[0].id)
          this.pageData.total = res.data.total
          console.log('total', this.pageData)
          this.flag = true
        }).catch((err) => {
          console.log('err', err)
        })
      }
    }

传过来的值显示在控制台

status:3是点击那个框，而显示框里面对应的内容，
display:'one’用来去区分不同静态页面

在通过相应的值形成参数来获取数据渲染到页面上