Vue动态路由传递数据，默认展示数据

首先，准备两个组件

然后配置，路由，这里的数据展示在一个页面，所以采用子路由的方法

先说一下大体思路：

1、在后台获取数据，并展示在页面上

2、准备两组数据，一组默认展示，一组切换时展示

ZhanOne.Vue

<template>
  <div class="ToTal">
    <div class="select">
      <el-form
        :inline="true"
        :model="FormInLine"
        class="demo-form-inline"
        style="display: inline-block"
      >
        <el-form-item label="城市">
          <el-select v-model="FormInLine.city">
            <el-option
              v-for="item in CityList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期:">
          <el-date-picker
            type="date"
            v-model="FormInLine.time"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="selectNow">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="ButtonList">
      <el-row v-for="(item,index) in tableDatas02" :key="index" style="display: inline-block">
        <router-link
          :to="`/timpozhan/timpozhan/zhanTwo?value=${item.value}
          &averageair=${item.averageair}
          &averagecloud=${item.averagecloud}
          &city=${item.city}
          &averagehumidity=${item.averagehumidity}
          &averageradiation=${item.averageradiation}
          &averagetemp=${item.averagetemp}
          &averagetgtemp=${item.averagetgtemp}
          &averagewind=${item.averagewind}
          &maxair=${item.maxair}
          &maxcloud=${item.maxcloud}
          &maxhumidity=${item.maxhumidity}
          &maxradiation=${item.maxradiation}
          &maxtemp=${item.maxtemp}
          &maxtgtemp=${item.maxtgtemp}
          &maxwater=${item.maxwater}
          &maxwind=${item.maxwind}
          &minair=${item. minair}
          &mincloud=${item.mincloud}
          &minhumidity=${item.minhumidity}
          &minradiation=${item.minradiation}
          &mintemp=${item.mintemp}
          &mintgtemp=${item.mintgtemp}
          &minwind=${item.minwind}
          `"
        >
          <el-button type="primary" @click="ChangeShow()">
            {{ item.value }}
          </el-button>
        </router-link>
      </el-row>
    </div>
    <div>
      <router-view v-if="isShow"></router-view>
      <div class="ShowList" v-for="(item,index) in this.tableDatass02" :key="index" v-else>
        <p>时间点：{{ item.value }}</p>
        <p>城市：{{ item.city }}</p>
        <p>平均气压：{{ item.averageair }}</p>
        <span>平均湿度：{{ item.averagehumidity }}</span>
        <span>最大湿度：{{ item.maxhumidity }}</span>
        <span>最小湿度：{{ item.minhumidity }}</span>
        <p>平均辐照度：{{ item.averageradiation }}</p>
        <span>最大辐照度：{{ item.maxradiation }}</span>
        <span>最小辐照度：{{ item.minradiation }}</span>
        <p>平均温度：{{ item.averagetemp }}</p>
        <span>最大温度：{{ item.maxtemp }}</span>
        <span>最小温度：{{ item.mintemp }}</span>
        <p>平均云量：{{ item.averagecloud }}</p>
        <p>最大云量：{{ item.maxcloud }}</p>
        <p>最小云量：{{ item.mincloud }}</p>
        <p>平均风速：{{ item.averagewind }}</p>
        <p>最大风速：{{ item.maxwind }}</p>
        <p>最小风速：{{ item.minwind }}</p>
        <p>平均体感温度：{{ item.averagetgtemp }}</p>
        <p>最大体感温度：{{ item.maxtgtemp }}</p>
        <p>最小体感温度：{{ item.mintgtemp }}</p>
        <p>日累计降水量：{{ item.maxwater }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { GetCity, GetNowData } from '@/api/commonApi'
import { getweatherCity, setweatherCity, removeisAdmin, getisAdmin, setisAdmin, removeweatherCity } from '@/utils/auth'

export default {
  name: 'ZhanOne',
  data() {
    return {
      CityList: [],
      FormInLine: {
        city: '济南',
        time: this.GetDate(1)
      },
      TimePoint: [], // 时间节点
      TimeAllDate: [], // 所有时间信息
      tableDatas02: [], // tableData02的数据
      tableDatass02: [],
      isShow: false,
      isShows: true
    }
  },
  created() {
    console.log(this.GetDate(1))
    this.selectCityList()
    this.initData()
  },
  methods: {
    GetDate(num) {
      const date1 = new Date()
      const date2 = new Date(date1)
      date2.setDate(date1.getDate() + num)
      const time1 = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate()
      return time1
    },
    selectCityList() {
      GetCity().then(res => {
        for (let i = 0; i < res.data.city.length; i++) {
          const city = {
            value: res.data.city[i].name
          }
          this.CityList.push(city)
        }
      })
    },
    initData() {
      GetNowData({ city: this.FormInLine.city, date: this.FormInLine.time }).then(res => {
        console.log('所需全部数据', res.data)
        //  时间节点
        for (let i = 0; i < res.data.length; i++) {
          const time = {
            value: res.data[i].time // 遍历数组展示四个按钮
          }
          this.TimePoint.push(time)
          for (let j = 0; j < res.data[i].tableData02.length; j++) {
            console.log('tableData02', res.data[i].tableData02) // 可以拿到四个时间节点的数据
            console.log('tableData03', res.data[i].tableData02[j]) // 可以拿到四组tableData02的数据
            const a = res.data[i].tableData02[j]
            const total01 = {
              value: res.data[i].time,
              date: a.date,
              averageair: a.averageair,
              averagecloud: a.averagecloud,
              averagehumidity: a.averagehumidity,
              averageradiation: a.averageradiation,
              averagetemp: a.averagetemp,
              averagetgtemp: a.averagetgtemp,
              averagewind: a.averagewind,
              city: a.city,
              maxair: a.maxair,
              maxcloud: a.maxcloud,
              maxhumidity: a.maxhumidity,
              maxradiation: a.maxradiation,
              maxtemp: a.maxtemp,
              maxtgtemp: a.maxtgtemp,
              maxwater: a.maxwater,
              maxwind: a.maxwind,
              minair: a.minair,
              mincloud: a.mincloud,
              minhumidity: a.minhumidity,
              minradiation: a.minradiation,
              mintemp: a.mintemp,
              mintgtemp: a.mintgtemp,
              minwind: a.minwind
            }
            this.tableDatas02.push(total01)
            if (res.data[i].time === '4:00') {
              for (let j = 0; j < res.data[i].tableData02.length; j++) {
                console.log('tableData02', res.data[i].tableData02)
                const a = res.data[i].tableData02[j]
                const total01 = {
                  value: res.data[i].time,
                  date: a.date,
                  averageair: a.averageair,
                  averagecloud: a.averagecloud,
                  averagehumidity: a.averagehumidity,
                  averageradiation: a.averageradiation,
                  averagetemp: a.averagetemp,
                  averagetgtemp: a.averagetgtemp,
                  averagewind: a.averagewind,
                  city: a.city,
                  maxair: a.maxair,
                  maxcloud: a.maxcloud,
                  maxhumidity: a.maxhumidity,
                  maxradiation: a.maxradiation,
                  maxtemp: a.maxtemp,
                  maxtgtemp: a.maxtgtemp,
                  maxwater: a.maxwater,
                  maxwind: a.maxwind,
                  minair: a.minair,
                  mincloud: a.mincloud,
                  minhumidity: a.minhumidity,
                  minradiation: a.minradiation,
                  mintemp: a.mintemp,
                  mintgtemp: a.mintgtemp,
                  minwind: a.minwind
                }
                this.tableDatass02.push(total01)
              }
            }
          }
        }
      })
    },
    selectNow() {
      this.TimePoint = []
      this.tableDatas02 = []
      this.tableDatass02 = []
      this.isShow = false
      this.initData()
    },
    ChangeShow() {
      this.isShow = true
    }
  }
}
</script>

<style scoped>

p , span{
  color: #ebefec;
  font-size: 18px;
}

</style>

ZhanTwo.Vue

<template>
  <div class="ZhanTwo">
    <div class="FirstSon">
      <p>时间点：{{ $route.query.value }}</p>
      <p>城市：{{ $route.query.city }}</p>
      <p>平均气压：{{ $route.query.averageair }}</p>
      <span>平均湿度：{{ $route.query.averagehumidity }}</span>
      <span>最大湿度：{{ $route.query.maxhumidity}}</span>
      <span>最小湿度：{{ $route.query.minhumidity}}</span>
      <p>平均辐照度：{{ $route.query.averageradiation }}</p>
      <span>最大辐照度：{{ $route.query.maxradiation}}</span>
      <span>最小辐照度：{{ $route.query.minradiation}}</span>
      <p>平均温度：{{ $route.query.averagetemp }}</p>
      <span>最大温度：{{ $route.query.maxtemp}}</span>
      <span>最小温度：{{ $route.query.mintemp}}</span>
      <p>平均云量：{{ $route.query.averagecloud }}</p>
      <p>最大云量：{{ $route.query.maxcloud }}</p>
      <p>最小云量：{{ $route.query.mincloud }}</p>
      <p>平均风速：{{ $route.query.averagewind}}</p>
      <p>最大风速：{{ $route.query.maxwind}}</p>
      <p>最小风速：{{ $route.query.minwind}}</p>
      <p>平均体感温度：{{ $route.query.averagetgtemp }}</p>
      <p>最大体感温度：{{ $route.query.maxtgtemp }}</p>
      <p>最小体感温度：{{ $route.query.mintgtemp }}</p>
      <p>日累计降水量：{{ $route.query.maxwater}}</p>
    
    </div>
    <div class="SecondSon">
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZhanTwo'
}
</script>

<style scoped lang="scss">
.FirstSon {
  p , span{
    color: #42b983;
    font-size: 18px;
  }
}
</style>

这里采用的是query方法传递参数，因为要传递的参数比较多，所以看起来比较冗杂。如果有其他好方法的大神，在线求答！！！！

总的来说，这就是动态路由的简单应用，本身没有什么技术含量。但是它多啊！！！

之前进入页面没有数据展示，思考很长时间，忽略了一个严重的问题！！！动态路由需要传递参数，才能根据对应的参数展示相对应的数据。

所以，就准备了两组数据，去进行展示。通过字段控制。