Блог

Я создаю веб-сайт курса, и у каждого курса есть своя страница. Допустим, я открываю курс № 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')
}
 

CourseList.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" }] }
 

Используйте объект для поиска идентификатора каждого курса по имени. Передайте 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, если другим модулям / компонентам требуется доступ к ним.