Vue 获取页面后跳转其他页面

 

 

 

<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><router-link :to="{name:'index',query:{id:item.id}}">{{ item.title }}</router-link></li> --> <li @click="changeDetail(item.id)">{{ item.title }}</li> </ul> </div>
  </div>
</template>

<script> export default { name: "CourseDetail", data() { return { index: "CourseDetail", detail: { course: null, img: null, level: null, slogon: null, title: null, why: null, chapter: [], recommends: [] } }; }, // created:在模板渲染成html前调用
 mounted() { var id = this.$route.query.id; this.getRouterData(id); }, methods: { getRouterData(nid) { // 发送ajax请求给后端 请求详细信息
      var _this = this; this.$axios .request({ url: `http://127.0.0.1:8000/api/v1/coursedetail/${nid}/`,
          methods: "GET" }) .then(function(ret) { // ajax请求发送成功后，获取的响应内容
          // ret.data=
          if (ret.data.code === 1000) { _this.detail = ret.data.data; } }) .catch(function(ret) { // ajax请求发送失败后，获取的响应内容
 }); }, //点击课程推荐跳转到推荐课程详细 changeDetail(id){ // 我需要重新调用getRouterData 向后端请求数据,不然不然会显示为空 this.getRouterData(id) this.$router.push({name:'CourseDetail',query:{id:id}}) } } }; </script>

<style scoped>
</style>