I am trying to set up a route for a specific component that can be accessed in two ways - one with a parameter and one without. I have been looking into optional parameters but haven't found much information.
Here is my current route setup:
{
path: '/offers/:member',
component: Offers,
name: 'offers',
props: true,
meta: {
guest: false,
needsAuth: true
}
},
When I programmatically call the route with the parameter, everything works as expected
this.$router.push({ path: /offers/1234 });
However, I also need to access it via navigation link like this
<router-link to="/offers">Offers</router-link>
The offers component is designed to accept the prop
props: ['member'],
And the component is used in this manner
<Offers :offers="data" :member="member"></Offers>
The workaround I have managed to make it work is by duplicating the route and having one of them not take any props:
{
path: '/offers',
component: Offers,
name: 'offers',
props: false,
meta: {
guest: false,
needsAuth: true
}
},
Although it functions correctly, I am not satisfied with this approach. Additionally, when in development mode, Vue.js displays a warning message
[vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }Is there a more elegant way to handle optional parameters in the component call like :member="member"?