第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

將 Vue 路由參數(shù)標(biāo)題轉(zhuǎn)換為 id

將 Vue 路由參數(shù)標(biāo)題轉(zhuǎn)換為 id

幕布斯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 中。


查看完整回答
反對(duì) 回復(fù) 2023-11-11
  • 1 回答
  • 0 關(guān)注
  • 169 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)