将 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() {&nbsp; return {&nbsp; &nbsp; courseIds: {&nbsp; &nbsp; &nbsp; 'course-name-here': 1,&nbsp; &nbsp; &nbsp; 'other-course': 2,&nbsp; &nbsp; &nbsp; 'one-more': 3&nbsp; &nbsp; }&nbsp; }}使用它getData()：getData() {&nbsp; &nbsp;...&nbsp; &nbsp;const url = 'http://my-api-here.amazonaws.com/v1/api/course?id=';&nbsp; &nbsp;axios.get(url + this.courseIds[this.title])&nbsp; &nbsp;...}如果其他模块/组件需要访问它，您可以将查找数据保留在 Vuex 中。