vue v-for循环遍历列表，点击每一项，根据服务器返回的id值，将不同的数据分别渲染在同一个页面

vue v-for循环列表，点击每一项，根据服务器传的id值，在同一页面渲染不同的数据

问题起源：
这几天在练习vue项目，其中vue-router的作用，在整个项目中起着至关重要的作用，其中包括一级路由的跳转、二级路由的跳转，这几天我遇到的这个问题是根据遍历服务器所给的数据，从而给这些数据都添加一个点击事件，点击不同的数据列表，让其渲染不同的内容，但是渲染的这些内容都是在这同一个页面组件中。这就用到了路由的动态匹配，但是由于是自己第一次练习，所以有些细节的东西没有掌握好，因此花费了一些时间去理解，所以今天特意的总结一下路由的动态匹配！

演示如下：

一、跳转前的页面

<div class="activity" v-for="(activity, index) in allActivity" :key="index">
        <div class="actName" @click="goTo(`/home/activityDeatil/${i_id[index]}`)">
          <div class="name">
            <div class="theme">活动主题：{{ activity.theme }}</div>
            <div class="id">活动编号：{{ activity.id }}</div>
          </div>
        </div>
        <div class="image" @click="goTo(`/home/activityDeatil/${i_id[index]}`)">
          <img
            :src="
              activity.pic_address
                ? activity.pic_address
                : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F02%2F16%2F6ee1508aca7cf35a7c69c99456f9eac8.jpg%21%2Ffwfh%2F804x401%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621779256&t=83f1ae413bf77e03e8c82f4e15d67464'
            "
            alt=""
          />
        </div>
      </div>

这块是封装的跳转路由的方法

goTo(path) {
      this.$router.push(path);
    },

data中的属性：

二、配置相应的路由映射关系

三、跳转后的路由

通过this.i_id = this.$route.params.i_id;来拿到后台给提供的id值，然后将这个值传入后端接口，就可以拿到每个id所对应的后台的数据

getDetailData() {
      // 接收到Volunteer传过来的i_id
      this.i_id = this.$route.params.i_id;
      console.log(this.i_id);
      //这块就可以用传入相应的id值来拿到后台给提供的相应的数据
      checkAllActivityDetail(this.token, this.i_id).then((res) => {
        console.log(res);
        //this.i_id_DetailContent = res;
        //if (res.isJoinActivity === 1) {
          //this.$refs.volunteer.innerText = "已报名";
          //this.$refs.volunteer.attributes[2].value =
            //"color: white;background: red;border-color: red;";
        }
      });
    },

四、检验id值是否传入

点击第一个列表，获得其对应的id值

点击第二个，获取其对应的id值


这里边返回的数据是不一样的！
第一个数据结果

第二个数据结果