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

Question

我正在创建一个课程网站，每个课程都有自己的页面。 假设我打开了 1 号课程，那么链接是 http://localhost:8080/course/1 。我想将其更改为 http://localhost:8080/course/course-name-here 。我的问题是，当我更改参数时，没有从 API 中获取数据。

index.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()
  }
}

单门课程示例

{ "_id": { "$oid": "5fc63dab36d8491476999831" }, 
"courseTitle": "Python For Everybody", 
"createdDate": { "$date": 1606852635135 }, 
"creator": "Admin", 
"courseId": 1, 
"courseDesc": "Description Lorem Ipsum is simply dummy text of the printing", 
"courseCategory": "Programming", 
"courseImage": "https://cwpwp2.betterthanpaper.com/wp-content/uploads/2019/06/2-1-1.jpg", 
"syllabus": [ { "chapterName": "Introduction to Python 3 Programming Tutorial", "chapterVideo": "eXBD2bB9-RA" }] }

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