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("出错啦");
// }
);

请求头设置好就没问题了