VueJs 动态绑定数据到路由

Question

我有一个包含所有试卷 ID 的对象，我也将这些 ID 呈现到表格中。 需要的是当有人点击Take Exam按钮时， 相关的paperid 应该传递给路由。 我试过了

this.$router.push('/startExam/{{paperid}}');

和

this.$router.push('/startExam/this.paperid');

但两者都不起作用。 如何动态地将数据传递给路由？ 我的代码在这里。

<tbody>
      <tr v-for="paperid in QuestionPapersArray">
        <td>{{paperid}}</td>
        <td></td>
        <th></th>
        <th><button class="btn" @click="takeExam">Take Exam</button></th>
      </tr>
</tbody>

和

methods:{
    takeExam(){
      console.log("Inside the function");
      this.$router.push('/startExam');
    }
  }

Answer 1

<tbody>
      <tr v-for="paperId in QuestionPapersArray">
        <td>{{ paperId }}</td>
        <td></td>
        <th></th>
        <th><button class="btn" @click="takeExam(paperId)">Take Exam</button></th>
      </tr>
</tbody>

---

试试下面的。

methods: {
  takeExam (paperId) {
    this.$router.push(`/startExam/${paperId}`)
  }
}  

或者，您可以在takeExam() 方法中尝试以下操作

this.$router.push({
  path: '/startExam',
  params: {
    id: paperId
  }
})

你的路由配置文件应该是path: '/startExam/:id'