How to make router parameter optional in Vue.js

In this tutorial, you’ll learn how to make component query parameters optional in Vue.js.

Suppose you have a Users component with the following route /users. It renders a list of all users.

{
  path: '/users/',
  components: Users,
  ...
}

Now you also would like to render individual users by passing user ID as a router parameter. You can do that by adding a parameter and making it optional.

{
  path: '/users/:id?', // id is optional
  components: Users,
  ...
}

To make a query parameter optional – you need to add a question mark "?" after the parameter name.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-router-optional-parameter

PS: Make sure you check other Vue.js tutorials, e.g. display unescaped HTML in Vue.js templates.