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>