我的用例是这样的。
- 用户来到questionPapersTable.vue并选择论文名称并点击开始考试按钮
- 然后用户从那里路由到 startExam.vue 组件 我想将该 id 参数值作为参数传递给 axios 并希望在此 StartExam 中显示该 id 参数.vue 组件。 我试过了
ID comes is : {{$route.query.id}}
但这不会显示任何内容,甚至不会在控制台中给出错误。 我如何实现这一点。这是我的代码。
questionPapersTable.vue
<template lang="html">
<div class="">
<h1>Hello</h1>
<table>
<tr>
<th>Paper Name</th>
<th></th>
</tr>
<tr v-for="n in 10">
<td>Demo</td>
<th><button @click="goStart(12)">Start exam</button></th>
</tr>
</table>
</div>
</template>
<script>
export default {
methods:{
goStart(paperId){
console.log("GO TO START EXAM!");
this.$router.push({
path:'/startExam',
params:{
id:paperId
}
});
}
}
}
</script>
startExam.vue
<template lang="html">
<div class="">
<h1>Start Exam</h1>
ID comes is : {{$route.query.id}}
</div>
</template>
<script>
import axios from 'axios'
export default {
created(){
axios.get('http://localhost/laravel_back/public/api/papers/' +id)
}
}
</script>
<style lang="css">
</style>
最佳答案
如果提供了路径,参数将被忽略:
router.push({ name: 'startExamName', params: { docId }}) // -> /startExam/123
router.push({ path: `/startExam/${docId}` }) // -> /startExam/123
// This will NOT work
router.push({ path: '/startExam', params: { docId }}) // -> /startExam
如果你想访问 id,在 javascript 代码中,
this.$route.params.id
关于vue.js - Vue JS 路由器查询传递并绑定(bind)到 axios,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49228911/