Optional param in vuejs router
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" ?
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
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
Additionally, you can also send different params, from where you call your route.
<router-link
:to="{
name: 'ComponentName',
params: { member: {}, otherParams: {} }
}"
/>
Follow WeChat
Success story sharing
path: /:lang?/homewill be executed for/homeas well as/es/home. (With Vue-Router 4.0.3, i havent tried other versions.)