Vue JS router query passing and bind to the axios - vue.js

Question

My use case is something like this.
User come to questionPapersTable.vue and choose a paper name and hit on a Start exam button
then the user is route to the startExam.vue component from there I want to pass that id parameter value to the axios as a parameter and want to display that id parameter in this StartExam.vue component.
I tried
ID comes is : {{$route.query.id}}
But this isn't display anything and even not give an error in console.
How do I achive this. This is my code.
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>

Answer 1

params are ignored if a path is provided:
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
Within in the javascript code if you want to access the id,
this.$route.params.id
https://router.vuejs.org/en/essentials/navigation.html