Vue JS router query passing and bind to the axios

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>

Agney · Accepted Answer · 2018-03-12 06:43:34Z

4

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

edited Mar 12, 2018 at 6:43

answered Mar 12, 2018 at 5:58

Agney

19.3k7 gold badges60 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

margherita pizza Over a year ago

i fixed it but I didn't get output to ID comes is : {{$route.query.id}}

Agney Over a year ago

How is your url structured now? If you are using params, it has to be {{$route.params.id}}

margherita pizza Over a year ago

Now it's coming. =) I do a silly mistake I put {{$route.params.id}} instead of {{$route.query.id}}. But still I can't call that in created() hook. I tied to console log inside created lifecycle hook console.log("Inside created",$route.params.id); but it says $route is not defined

Agney Over a year ago

You should use this.$route.params.id.

margherita pizza Over a year ago

Thanks a lot. It works! I highly appreciate your support. =)

Collectives™ on Stack Overflow

Vue JS router query passing and bind to the axios

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related