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>