How to make router parameter optional in Vue.js

in Code Write a comment

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


Hi, I'm Renat 👋

âžœ  


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.

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment