Vue 编程式的导航

Posted 2020-11-13 wt7018

1、应用场景

在同一路由的情况下，不同的参数之间进行切换

注意：别忘记初始化路由页面

2、用法

a、定义方法

b、实现方法

c、初始化路由页面

3、案例

<template>
    <div>
          <div>
      <p>{{details.courses}}</p>
      <p>{{details.img}}</p>
      <p>{{details.level}}</p>
      <p>{{details.slogan}}</p>
      <p>{{details.title}}</p>
      <p>{{details.why}}</p>
      <div>
        <ul v-for="item in details.chapter">
          <li>{{item.name}}</li>
        </ul>
      </div>
      <h4>推荐课程</h4>
      <div>
        <ul v-for="item in details.recommend_courses">
          <li @click="changeDetail(item.id)">{{item.title}}</li>
        </ul>
      </div>

    </div>
    </div>
</template>

<script>
    export default {
        name: "Detail",
        data(){
          return {
            msg: "细节",
            details: {
              chapter: [],
              courses: null,
              id: null,
              img: null,
              recommend_courses: [],
              slogan: "",
              title: "",
              why: ""
            } ,
          }
        },
      mounted() {
        // console.log(this.$route.params.id);
        let id = this.$route.params.id;
        this.initDetail(id);
      },
      methods:{
          // 初始化detail路由页面
          initDetail(id){
            // console.log(id);
            let that = this;
            let url = `http://127.0.0.1:8000/api/v1/course/${id}/`;
            console.log(url);
            this.$axios.get(url)
              .then(function (response) {
                console.log(response.data);
                if (response.data.code === 1000){
                  that.details = response.data.data;
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          },
          changeDetail(id){
            // 导航式路由
            this.$router.push({name: ‘detail‘, params: {id: id}});
            // 初始detail路由页面
            this.initDetail(id);
          }
      },
    }
</script>

<style scoped>

</style>