router-link结合v-for使用（跳转详情）

router-link结合v-for使用：

今天实现列表页跳转到详情页 我没有用编程式导航 用的router-link实现跳转

<template>
  <div class="jingpin">
    <div class="jingpinclass">{{battleList[1].channel_info.name}}</div>
    <router-link class="jingpinbox" v-for="(ele,index) in battleList[1].list" :key="index" :to="{path:'/jingpinDetail',query:{id:ele.id}}" tag="div">
      <p class="jingpintitle">{{ele.title}}</p>
      <p class="classnumber">共{{ele.total_periods}}课时</p>
      <div class="imgfont">
        <p class="classimg">
          <img :src="ele.teachers_list[0].teacher_avatar" alt />
        </p>
        <p class="classname">{{ele.teachers_list[0].teacher_name}}</p>
      </div>
      <div class="people">
        <p class="peoplename">{{ele.sales_num}}人已报名</p>
        <p class="price">{{ele.price|price}}</p>
      </div>
    </router-link>
  </div>
</template>

<script>
import { getBattle } from "../http/api";
import "../assets/jingpin/jingpin.scss";
export default {
  name: "teacher",
  data() {
    return {
      battleList: []
    };
  },
  created() {
    this.getJingpin();
  },
  methods: {
    getJingpin() {
      getBattle().then(res => {
        // console.log(res.data.data);
        this.battleList = [...res.data.data];
        console.log(this.battleList[1]);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

直接path后面写详情路径，query后面写参数，tag让router-link它变成div （默认是a标签）

<router-link class="jingpinbox" v-for="(ele,index) in battleList[1].list" :key="index" :to="{path:'/jingpinDetail',query:{id:ele.id}}" tag="div">

注意api里面封装的 接口要传递的参数

// 精品课程详情
export function getjingpindetail({id}){
  return request({
    url:`/courseInfo/basis_id=${id}`,
    method:"GET",
    data:{
      basis_id:id
    }
  })
}

这个是跳转的详情页面 接住上面传过来的参数

<template>
<!-- 精品课程详情 -->
    <div class="getjingpindetail">
        精品课程详情
    </div>
</template>

<script>
import { getjingpindetail } from "../http/api";
    export default {
        name:"getjingpindetail",
        data(){
            return{

            }
        },
        created(){
            this.getjingpindetail()
        },
        methods:{
            getjingpindetail(){
                getjingpindetail({
                    id:this.$route.query.id
                }).then(res =>{
                    console.log(res)
                })
            }
        }
    }
</script>

这样就没毛病了。

说一下今天遇到的这个bug，我的页面头像框和手机号不渲染

其实就是设置header请求头的问题

//请求拦截

service.interceptors.request.use(
  config => {
    // 设置请求头
    config.headers["deviceType"] = ["H5"];
    
    config.headers.authorization = localStorage.getItem("token")
    // config.headers["deviceType"] = ["H5"];
    // console.log("请求的数据:", config);
    return config;
  },
  // error => {
  //   return Promise.reject("出错啦");
  // }
);

请求头设置好就没问题了