Is there a way i can get a route parameter in vue

Question

I am new to vuejs, i have my api in laravel having a route such as

Route::get('/get-song-details/{id}','SongsController@getSongDetails');. How do get this id in vue so that i can display only information about the selected song.

in the sample below, when i pass 1, i get information about song 1, and so on. how do i make it dynamic?

export default {
    data(){
        return {
            songs : []
        }
    },
    created(){
        axios.get('/api/get-song-details/1')
        .then(response => this.songs = response.data);
    }
};
</script>

Does this answer your question? [Accessing $route.params in VueJS](https://stackoverflow.com/questions/47414918/accessing-route-params-in-vuejs) — Trenton Trama, Feb 17 '20 at 22:54

score 0 · Accepted Answer · answered Feb 17 '20 at 22:58

asumming you are using vue-router, the route component should be declared so:

routes: [
  { path: '/song/:id', component: Song }
]

then in your created method of Song component can get the id param:

created() {
  axios.get('/api/get-song-details/' + this.$route.params.id)
  ...
}

score 0 · Answer 2 · answered Feb 18 '20 at 04:20

0

All route params can be accessed by using this.$route.params.paramName in JS code or by using $route.params.paramName in template. paramName is the parameter name as defined in your router.

answered Feb 18 '20 at 04:20

Eklavya

1
2

Is there a way i can get a route parameter in vue

2 Answers2