将 Vue 路由参数标题转换为 id

Question

我正在创建一个课程网站，每个课程都有自己的页面。假设我打开课程号 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()  }}

Answer 1

使用对象通过名称查找每个课程的 id。传递title参数而不是（在路由、链接和道具中id更改为）。title在组件中：

data() {

  return {

    courseIds: {

      'course-name-here': 1,

      'other-course': 2,

      'one-more': 3

    }

  }

}

使用它getData()：

getData() {

   ...

   const url = 'http://my-api-here.amazonaws.com/v1/api/course?id=';

   axios.get(url + this.courseIds[this.title])

   ...

}

如果其他模块/组件需要访问它，您可以将查找数据保留在 Vuex 中。