Optional param in vuejs router

Question

I need to route to a certain component in two ways - one with a param, one without. I have searched for optional params and somehow can't find much info.

So my route:

{
    path: '/offers/:member',
    component: Offers,
    name: 'offers',
    props: true,
    meta: {
        guest: false,
        needsAuth: true
    }
},

When I call it with the param programmatically, all is fine

this.$router.push({ path: /offers/1234 });

However I also need to call it via nav like this

<router-link to="/offers">Offers</router-link>

The offers component accepts the prop

props: ['member'],

And component used as such

<Offers :offers="data" :member="member"></Offers>

Now the ugly way I've managed to get it working is duplicating the route and making one of them not take props:

{
    path: '/offers',
    component: Offers,
    name: 'offers',
    props: false,
    meta: {
        guest: false,
        needsAuth: true
    }
},

It actually works, but i'm not happy with it - also in dev mode vuejs is warning me [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Surely there's a way to do optional param in the component call :member="member" ?

Jacob Goh · Accepted Answer · 2018-03-20T02:41:31.417

482

Just adding a question mark ? will make it optional.

{
    path: '/offers/:member?',
    ...
},

It works for Vue Router 2.0 onward.

Source: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

edited Mar 20 '18 at 02:41

answered Dec 15 '17 at 08:28

Jacob Goh

19,800
5
53
73

58

Would love if this was in the guide! – Damon Feb 07 '19 at 15:12
7

Thanks, this is very helpful. Wish this was clearly mentioned in the guide. – Gaurav Joshi Mar 16 '19 at 05:27
5

This also works if the param is not at the end. ```path: /:lang?/home``` will be executed for ```/home``` as well as ```/es/home```. (With Vue-Router 4.0.3, i havent tried other versions.) – Wolle Mar 23 '21 at 12:02
This is a great answer, especially since it's nowhere to be found in vue routers documentation. – Hybrid web dev May 22 '21 at 04:10
Fantastic, I still can't find this in the officel Vue router docs. – Craig Nakamoto Sep 23 '21 at 17:17
Looks like they documented it but have it hidden at the bottom of Route Matching Patterns [Optional Params](https://router.vuejs.org/guide/essentials/route-matching-syntax.html#optional-parameters) Worth mentioning, If you want to explicitly list both the routes to make it clear you can do so as long as `/:foo?` comes after `/` . Order matters to keep from getting unmatched warning – isimmons Apr 18 '22 at 20:01

JCH77 · Answer 2 · 2021-10-20T08:58:57.247

For advanced routes matching patterns the manual says :

vue-router uses path-to-regexp as its path matching engine, so it supports many advanced matching patterns such as optional dynamic segments, zero or more / one or more requirements, and even custom regex patterns. Check out its documentation for these advanced patterns, and this example of using them in vue-router.

path-to-regexp page/manual => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

score 2 · Answer 3 · edited Jul 10 '22 at 03:47

2

Additionally, you can also send different params, from where you call your route.

<router-link
  :to="{
    name: 'ComponentName',
    params: { member: {}, otherParams: {} }
  }"
/>

edited Jul 10 '22 at 03:47

Riza Khan

2,712
4
18
42

answered Feb 27 '20 at 13:19

Amit Kadam

589
6
7

Optional param in vuejs router

3 Answers3

Linked