Get 'id' value from vue-router's link

Question

How to get an object value from vue-router's link? For example 'id' in this link http://laravel.dev/#!/messages/1703

So with that id i can fetch specific data from database.

My code

var detailMessage = Vue.extend({
template: '#detailMessage',
data: function() {
    return {
        id: ''
    }
},
ready: function(id) {
    this.getID(id);
},
methods: {
    getID: function(id) {
    this.$http.get('/api/messages/' + id, function(data) {
        alert(data);
            })
        }
    }
})


var router = new VueRouter()
router.map({
'/api/messages/:idMessage': {
    name: 'sentMessage',
    component: detailMessage
    }
})

Sorry, the error was when link clicked, view and url change but what send to server is http://laravel.dev/api/messages/undefined

Here error screenshot

Thanks

Solution

router.map({
'/api/messages/:message_id': {
    name: 'sentMessage',
    component: detailMessage
    }
})

You can then access anywhere in the vm with this.$route.params.message_id

Comments

[Arlo Guthrie]

What if the route is being added by router.push?

[Arlo Guthrie]

Never mind, this site explains it clearly: router.vuejs.org/guide/essentials/navigation.html