幕布斯6054654
2023-11-11 21:41:16
我正在創(chuàng)建一個(gè)課程網(wǎng)站,每個(gè)課程都有自己的頁(yè)面。假設(shè)我打開(kāi)課程號(hào) 1,則鏈接為 http://localhost:8080/course/1 。我想將其更改為 http://localhost:8080/course/course-name-here 。我的問(wèn)題是,當(dāng)我更改參數(shù)時(shí),不會(huì)從 API 獲取數(shù)據(jù)。索引.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() }}
1 回答

qq_笑_17
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊
使用對(duì)象通過(guò)名稱(chēng)查找每個(gè)課程的 id。傳遞title參數(shù)而不是(在路由、鏈接和道具中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])
...
}
如果其他模塊/組件需要訪問(wèn)它,您可以將查找數(shù)據(jù)保留在 Vuex 中。
添加回答
舉報(bào)
0/150
提交
取消