How to pass parameter to vue.js router in a method function?

Question

I'm trying to send 'joke.id' as parameter to the router:

edit: function(joke) {
    this.$router.push({ '/edit/' + joke.id }); 
}

The relevant route is:

{path: '/edit/:id', component: editJoke, name: 'editJoke'},

However I get this in the console:

Module build failed: SyntaxError: Unexpected token

this.$router.push({ '/edit/' + joke.id }); 
  |                          ^

How can I fix this?

Answer 1

You can pass parameters to the router by using this syntax:

edit: function(joke) {
    this.$router.push('/edit/' + joke.id)
}

If you have named your route you can use this syntax instead:

edit: function(joke) {
    this.$router.push({ name: 'edit', params: { id: joke.id }})
}

Read more about programmatic navigation with Vue Router here.