Menu
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.
to get the value of the id route parameter with this. $route.params.id with the options API. We call useRoute to return the route object and then we get the value of the id route parameter with route.params.id .
Vue router: Vue Router helps link between the browser's URL/History and Vue's components allowing for certain paths to render whatever view is associated with it. A vue router is used in building single-page applications (SPA). The vue-router can be set up by default while creating your new project.
Adding dynamic routes in VueUpdate the router/index. js file with the new route in the routes array. Remember to include the import for the Post component. Restart your app and head to localhost:8080/post/dynamic-routing in your browser.
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: {} }
}"
>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With