1、应用场景
在同一路由的情况下，不同的参数之间进行切换
注意：别忘记初始化路由页面
2、用法
a、定义方法
b、实现方法
c、初始化路由页面
3、案例
<template>
<div>
<div>
<p>{{details.courses}}</p>
<p>{{details.img}}</p>
<p>{{details.level}}</p>
<p>{{details.slogan}}</p>
<p>{{details.title}}</p>
<p>{{details.why}}</p>
<div>
<ul v-for="item in details.chapter">
<li>{{item.name}}</li>
</ul>
</div>
<h4>推荐课程</h4>
<div>
<ul v-for="item in details.recommend_courses">
<li @click="changeDetail(item.id)">{{item.title}}</li>
</ul>
</div> </div>
</div>
</template> <script>
export default {
name: "Detail",
data(){
return {
msg: "细节",
details: {
chapter: [],
courses: null,
id: null,
img: null,
recommend_courses: [],
slogan: "",
title: "",
why: ""
} ,
}
},
mounted() {
// console.log(this.$route.params.id);
let id = this.$route.params.id;
this.initDetail(id);
},
methods:{
// 初始化detail路由页面
initDetail(id){
// console.log(id);
let that = this;
let url = `http://127.0.0.1:8000/api/v1/course/${id}/`;
console.log(url);
this.$axios.get(url)
.then(function (response) {
console.log(response.data);
if (response.data.code === 1000){
that.details = response.data.data;
}
})
.catch(function (error) {
console.log(error);
});
},
changeDetail(id){
// 导航式路由
this.$router.push({name: 'detail', params: {id: id}});
// 初始detail路由页面
this.initDetail(id);
}
},
}
</script> <style scoped> </style>
