how to call URL in axios.post request for get data each id?

Question

I'm fetching Data from an API using Axios and i'm displaying them as Cards in a Component movie cards, the thing is that i want to be able to click on a single movie card and the router take me to another page(singlepage.vue) with that movie id from the API and displaying the Book specific data but the problem is that I do not know how to send the ID of the same movie card I entered to the API and then return its data (I have to use the post method for request and put my post image below). this is postman image. click here.

firstPage.vue this is same component that i have movie cards.

<template>
   <div class="articles">
       <h2>featured articles</h2>
   </div>
   <div class="article-container">
       <div class="article-grid" v-for="data3 in datas3" :key="data3.ContentID" >
           <router-link to="/content"  >
           <img :src="data3.LandscapeImage">
           <div class="article-title">
               <p>{{data3.Properties[5].Value}}</p>
               <h3>{{data3.Title}}</h3>
           </div>
           </router-link>
       </div>
   </div>
   

    <div class="number-container">
               <a class="previous" href="">&laquo; <span>previous</span></a>
               <a href="">1</a>
               <a href="">2</a>
               <a href="">3</a>
               <a href="">4</a>
               <a href="">...</a>
               <a href="">10</a>
            <a class="next" href="#"> <span>next</span> &raquo;</a>
       </div>

</template>

<script>


export default {
name : "ThirdSection",
 props : ['datas3'],
   
} 
</script>

singlepage.vue this is same component i want show data each cart after i click on card.

<template>

   <div class="content">
       <div class="content-sidebar">
       <SideBar />
       </div>
       <section class="main-content">

         <div class="content-container">
             <div class="content-img"> <img src="" alt=""></div>
             <div class="content-text" >
                 <h2></h2>
                 <p></p>
             </div>
         </div>
       </section>
    
   </div>


</template>

<script>
import axios from 'axios'

import SideBar from '../../components/Sidebar.vue'

export default {
components :{
    SideBar
},

//I have a problem here//
setup() {
   const request = { RequestID : "16460"}
    function getContent (){
  axios.post('request url', request ,
  { headers : {
          'Content-Type' : 'application/json',
      }}
  )
  
    .then(function(response){
        console.log(response);
    })
}
 getContent();
 return {};
    }
   
}
</script>

Answer 1

What you need is to create a route for the single page that has params in it, and parse them in the component to use them in the request.

See: https://router.vuejs.org/guide/essentials/passing-props.html

Register your routes with the desired component and specify a parameter:

{ path: '/user/:book_id', component: require("<singlepage.vue>"), props: true }

singlepage.vue:

<template>

   <div class="content">
       <div class="content-sidebar">
       <SideBar />
       </div>
       <section class="main-content">

         <div class="content-container">
             <div class="content-img"> <img src="" alt=""></div>
             <div class="content-text" >
                 <h2></h2>
                 <p></p>
             </div>
         </div>
       </section>
    
   </div>


</template>

<script>
import axios from 'axios'

import SideBar from '../../components/Sidebar.vue'

export default {
components :{
    SideBar
},
props: ["book_id"],
//I have a problem here//
setup() {
   const request = { RequestID : "16460"}
    function getContent (){
  axios.post('request url', request ,
  { headers : {
          'Content-Type' : 'application/json',
      }}
  )
  
    .then(function(response){
        console.log(response);
    })
}
 getContent();
 return {};
    }
   
}
</script>