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 rout

Answer 1

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

Answer 2

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

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

Answer 3

For advanced 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