我正在尝试从第二个视图中的第一个视图中的路由器链接按钮中按ID填充数据。不知道我是否应该通过BaseURL

Question

是否有办法通过URL通过ID来实现此目的？以及如何设置第二页上显示的信息仅是该ID号？发生重大脑死时刻

   <div v-for="prize in prizes" :key="prize.name">
     <div class="card_individual">
       <div class="card-media-container">
         <img class="card_image" src="../assets/c5Cor.jpg" alt="people"/></div>
        <div class="card-detail-container">
          <div class="card_title">Win a {{ prize.name }}</div>
        </div>
        <div class="modal-footer">
          <router-link :to="{ name: 'PriceDetail'}"><button type="button" class="btn btn-primary">{{ cards.btn_text }}</button></router-link>
        </div>
      </div>
    </div>

<script>
import axios from 'axios'
export default {
  name: 'Prizes',
  data () {
    return {
      prizes: [],
    }
  },
  mounted () {
    this.getPrizes()
  },
  methods: {
    getPrizes () {
      axios.get('http://localhost:3000/prizes').then(response => {
        this.prizes = response.data.prizes
        this.id = response.data.prizes.id
      })
    }
  }
}

Answer 1

您需要传递ID作为道具，以便第二个视图可以使用其他API调用来通过ID检索奖品（价格？）。详细视图应如下所示：

props: {
  prizeId: Number
},
mounted () {
  this.getPrizeById()
},
methods: {
  getPrizeById() {
    axios.get('http://localhost:3000/prizebyid/' + this.prizeId).then(response => {
      this.prize = response.data.prize
    })
  }
}

您可以像这样从主列表在路由器链接中传递该ID属性：

<router-link :to="{ name: 'PriceDetail', params: { id: prize.id }}">

这会将ID作为路径的一部分传递（称为参数）。只需确保PriceDetail路线的路线定义期望使用参数，并将它们转换为props（使用props: true），即可执行以下操作：

{ path: '/<your-path>/:id', name: 'PriceDetail', props: true }

并且您需要确保将您的后端配置为在访问http://localhost:3000/prizebyid/1000之类的路由时提供单独的数据