主页面
<template> <div> <ul v-for="item in courseList"> <router-link :to="{ name:index,query:{id:item.id} }">{{ item.title }}</router-link> </ul> </div> </template> <script> export default { name: "Couerse", data() { return { index: "CourseDetail", courseList: "" }; }, // 页面刚加载立即执行 = mounted
// mounted:在模板渲染成html后调用
mounted() { this.initCourse(); }, methods: { //这个方法也可以跳转 handleClick(ret) { this.$router.push({ path: `/CourseDetail/${ret}/`, query: { page: ret, code: "8989" } }); }, //通过ajax向接口发送请求并获取课程列表 //axios/jquery // npm install axios --save // 第一步：在main.js中配置 //第二步：使用axios发送请求 initCourse: function() { // 记住一点要定义一个全局的 this 来取值 var _this = this; this.$axios .request({ url: "http://127.0.0.1:8000/api/v1/course/", methods: "GET" }) .then(function(ret) { // ajax请求发送成功后，获取的响应内容 // ret.data= if(ret.data.code === 1000){ _this.courseList = ret.data.data; } }) .catch(function(ret) { // ajax请求发送失败后，获取的响应内容 }); } } }; </script> <style scoped> </style>
跳转后的页面
<template> <div> <img :src="detail.img" /> <h1>{{ detail.title }}</h1> <h3>{{detail.slogon }}</h3> <h5>{{ detail.level }}</h5> <p>{{ detail.why }}</p> <div> <ul v-for="item in detail.chapter"> <li>{{ item.title }}</li> </ul> </div> <br/> 推荐课程： <div> <ul v-for="item in detail.recommends"> <li>{{ item.title }}</li> </ul> </div> </div> </template> <script> export default { name: "CourseDetail", data() { return { detail: { course: null, img: null, level: null, slogon: null, title: null, why: null, chapter: [], recommends: [] } }; }, // created:在模板渲染成html前调用 created() { this.getRouterData(); }, methods: { getRouterData() { // 拿到主页面传过来的id值 this.id = this.$route.query.id; // 发送ajax请求给后端 请求详细信息
//获得一个全局的this
var _this = this; this.$axios .request({ url: `http://127.0.0.1:8000/api/v1/coursedetail/${this.id}/`, methods: "GET" }) .then(function(ret) { // ajax请求发送成功后，获取的响应内容 // ret.data= if (ret.data.code === 1000) { _this.detail = ret.data.data; } }) .catch(function(ret) { // ajax请求发送失败后，获取的响应内容 }); } } }; </script> <style scoped> </style>