Vue获取后端数据 渲染页面后跳转

主页面

<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>