点击哪个显示哪个的详细信息 query传值

点击主页的某个图片

  <swiper :options="swiperOption" class="banner-swiper">
      <swiper-slide
        class="swiper-slide"
        v-for="(item, index) in spikeList"
        :key="index"
      >
        <div @click="toDetails(item)">
          <div class="spike-top">
            <img src="@/assets/img/spike1.png" alt="" />
            <span>距离结束</span>
            <count-down
              :currentTime="item.startTime"
              :startTime="item.startTime"
              :endTime="item.endTime"
              :dayTxt="'天'"
              :hourTxt="':'"
              :minutesTxt="':'"
              :secondsTxt="''"
            ></count-down>

---

方法l里面

 methods: {
    toDetails(item){
      this.$router.push({
        path:'/details',
        query:{　　　　　　　　　　　　　　把item通过query传递过去
          item
        }
      })
    },

---

在另一边详情页接收

  props: {},
  data() {
    return {
        item:'',
      swiperOption: {
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
  activated(){
      console.log(this.$route.query);
        this.item = this.$route.query.item　　　　　　　　把传递过来的东西传递给data的item
      
  },

---

然后使用

    <swiper :options="swiperOption" class="banner-swiper">
     
      <swiper-slide class="swiper-slide">
        <img :src="item.imgUrl" alt="" />
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <div class="banner-title">
       {{item.title}}
    </div>