父组件点击其中一个项带参数(query或者params)跳转到详情页案例

父组件

  编号：
      <el-input
        v-model="pageParams.planCode"
        placeholder="请输入编号"
        style="width:200px"
      ></el-input>

 <el-button style="margin-right:10px" plain type="primary" @click="detailFun(row)"
            >查看详情</el-button
          >

 methods: {
    detailFun(item) {
      this.$router.push({
        path: '/emergencyPlan/planDetail',
        query: {
          planCode: item.planCode
        }
      })
    }
   }

点击进入其中一个子组件

 预案编号：
      <el-input v-model="plan.planCode" :disabled="true" style="width:200px"></el-input> 

 data() {
    return {
      plan: []
    }
  }

= this.$route.query.“参数名” （子组件接受语法写在mounted里面）

 mounted() {
    this.plan.planCode = this.$route.query.planCode
    console.log(this.plan.planCode)
    this.detailFun()
  },
  methods: {
    detailFun() {
      let p = {
        planCode: this.plan.planCode
      }
      getPlanInfos(p).then(res => {
        console.log(res.data)
      })
    }
  }

思路详解:

一:
父组件
点击查看详情，需要跳转，1.路径：path
 2. 参数（query/params) 参数就是点击这一项的带的唯一值，序号的id，pageParams.planCode这一项就是。(也看情况需要查的一项，再找对应的参数，id多一点)
二:
点击进入详情页其中一个里面后(子组件)：
1.接收通常写在mounted(较为多，一般接口调用都在这里面)或者methods 
接收 用  = this.$router.query.需要传的参数
 mounted() {
    this.plan.planCode = this.$route.query.planCode
  }
等号前面是 data里面的 传到本组件里面
 data() {
    return {
      plan: []
    }
  }
本身是空数组，传过来就可以连接上了  预案编号：<el-input v-model="plan.planCode" :disabled="true" style="width:200px"></el-input>


然后请求数据

methods: {
    detailFun() {
      let p = {
        planCode: this.plan.planCode
      }
      getPlanInfos(p).then(res => {
        console.log(res.data)
      })
    }
  }