我正在創建一個課程網站，每個課程都有自己的頁面。假設我打開課程號 1，則鏈接為 http://localhost:8080/course/1 。我想將其更改為 http://localhost:8080/course/course-name-here 。我的問題是，當我更改參數時，不會從 API 獲取數據。索引.js{    path: '/courses',    name: 'Courses',    component: () => import(/* webpackChunkName: "about" */ '../views/Courses.vue')},{    path: '/course/:id',    name: 'CourseDetail',    props: true,    component: () => import(/* webpackChunkName: "about" */ '../views/CourseDetail.vue')}課程列表.vue<v-row>   <v-col sm="6" md="4" v-for="course in courses" v-bind:key="course.courseId">      <router-link v-bind:to="{name: 'CourseDetail', params: {id: course.courseTitle}}" class="text-decoration-none">         <VerticalCard v-bind:course="course"/>      </router-link>   </v-col></v-row>CourseDetail.vue（腳本）import axios from 'axios'export default {  props:['id'],  data: function(){    return {      singleCourse: null,      selectedIndex: null,      showPage: false    }  },  methods: {    getData() {      var that = this      axios.get('http://my-api-here.amazonaws.com/v1/api/course?id=' + this.id,            {              headers: {                'Authorization' : 'Bearer ' + this.$store.state.authKey               }            })            .then(function(response) {              that.singleCourse = response.data.body            })      },      show() {        if(this.$store.state.isLogin == true){          this.showPage = true        }        else {          this.$router.replace('/login')        }      }  },  mounted: function() {    this.getData()    this.show()  }}