VueJS | How to get access to Router Parameter in my Component

Question

I tried to get access to my parameter :id in my Entry component. I tried it with props but it doesn't work. Any idea? Can't find anything.

export default new Router({
    routes: [{
        path: '/entry/:id',
        name: 'Entry',
        component: Entry
    }]
})

Thank you

Answer 1

While soju's answer is correct, I tend to use the method in which the docs refer to as 'decoupling the router using props'.

This can be accomplished by add the props: true option to your route and defining a property in your component.

So in your Route you would have:

export default new Router({
     routes: [{
          path: '/entry/:id',
          name: 'Entry',
          component: Entry,
          props: true
     }]
})

Then in your component you add a prop:

Vue.component('Entry', {
       template: '<div>ID: {{ id}}</div>',
       props:['id']
})

This can all be found in the docs: Passing Props to Route Components

Answer 2

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

Read more : https://router.vuejs.org/guide/essentials/dynamic-matching.html

You should consider using props : https://router.vuejs.org/en/essentials/passing-props.html