动态路由

一.在index.js配置路由

将后端的数据，分别根据id渲染到同一个组件上

{
    path: "/tuijian/:id",
    name: "tuijian",
    component: tuijian,
  },

三.在methods配置

后端给我返回的数据，我将其存到imgList中。

 <div class="shop_container">
    <ul class="shop_list">
      <li class="shop_li" v-for="(item, index) in imgList" :key="index">
        <div class="shop_left" @click="goTo(`/tuijian/${item.id}`)">
          <img class="shop_img" :src="item.url" />
          <div class="shop_left1">
            {{ item.title }}
          </div>
        </div>
      </li>
    </ul>
    <p class="CardList_content">没有更多了</p>

这里是要跳转的路径

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

四. tuijian.vue

遍历后端返回的数据

v-for="(item, index) in pageList" :key="index"

async created() {
    this.id = this.$route.params.id;
    const res = await reqimage(id);//发送GET请求，请求数据
    this.pageList = res.data;//保存数据
  },

五.完整代码。

CardList.vue

<template>
  <div class="shop_container">
    <ul class="shop_list">
      <li class="shop_li" v-for="(item, index) in imgList" :key="index">
        <div class="shop_left" @click="goTo(`/tuijian/${item.id}`)">
          <img class="shop_img" :src="item.url" />
          <div class="shop_left1">
            {{ item.title }}
          </div>
        </div>
      </li>
    </ul>
    <p class="CardList_content">没有更多了</p>
    <br /><br /><br /><br />
  </div>
</template>
<script>
import { reqList } from "../../api/index";
export default {
  data() {
    return {
      imgList: [],
      imageList: [],
    };
  },
  created() {
    reqList().then((res) => {
      this.imgList = res.data;
      // console.log(res.data);
    });
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
  },
};
</script>
<style lang="stylus" rel="stylesheeet/stylus">
@import "../../common/stylus/mixins.styl"
  .shop_container
    margin-bottom 50px
    overflow hidden
    .shop_list{
      width 100%
      height 100%
      overflow hidden
      .shop_li{
        display:inline;
        width 100%
        height 150px
        .shop_left{
          width 49%
          margin 2% 0 0 3px
          float left
          height 180px
          }
        }
      }
      .shop_img{
      display block
      border-radius 13px
      width 100%
      height 75%
      }
    .shop_right{
      width 49%
      height 140px
      float right
      background-color #eee
    }
    .shop_left1{
      overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
      text-overflow: ellipsis /*当文本溢出包含元素时发生的事情 ellipsis*/
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size:15px;
      line-height 20px
      margin-top: 5px;
    }
    .CardList_content{
      width: 100%;
      height: 30px;
      margin-top: 20px;
      text-align: center;
      color: #7d7979;
      font-size: 14px;
    }
</style>

tuijian.vue

<template>
  <div class="tuijian">
    <div class="" v-for="(item, index) in pageList" :key="index">
      <div>
        <h2 class="tui_jian">{{ item.title }}</h2>
        <div class="tuijian_wen">
          {{ item.page }}
        </div>
        <img :src="item.url" alt="" class="tuijian_img" />
        <div class="tuijian_wen">
          {{ item.page1 }}
        </div>
        <img :src="item.url1" alt="" class="tuijian_img" />
        <div class="tuijian_wen">
          {{ item.page2 }}
        </div>
        <img :src="item.url2" alt="" class="tuijian_img" />
        <div class="tuijian_wen">
          {{ item.page3 }}
        </div>
        <div class="tuijian_wen">
          {{ item.page4 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqimage } from "../../api";
export default {
  data() {
    return {
      pageList: [],
      id: "",
    };
  },
  async created() {
    this.id = this.$route.params.id;
    let id = this.id;
    console.log(id);
    const res = await reqimage(id);
    this.pageList = res.data;
    console.log(this.pageList);
  },
  methods: {},
};
</script>

<style>
.tuijian {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: skyblue;
}
.tuijian_wen {
  width: 90%;
  margin: 0 5%;
  font-size: 14px;
  text-align: left;
}
.tuijian_img {
  display: block;
  width: 90%;
  margin: 0 5%;
}
.tui_jian {
  overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
  text-overflow: ellipsis; /*当文本溢出包含元素时发生的事情 ellipsis*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 16px;
  margin: 0 7%;
}
</style>```