Exploring Vue.js Router
Currently, I am delving into the official vue-router of vue.js.
My focus is on implementing route matching using dynamic route matching. With vue-router utilizing path-to-regexp underneath its operations, regex can be employed in route paths, as explained here. An illustration of the use of this feature in vue-router can be found here.
The Challenge
This represents my current route configuration:
{
path: '/a/:id/(r/:generic1/)?s/:name/a'
}
Here are some examples that produce successful matches:
'/a/1234/s/Foo/a' // => {0: undefined, id: "1234", name: "Foo"}
'/a/23456/s/Bar/a' // => {0: undefined, id: "23456", name: "Bar"}
However, the following examples should work but are not yielding the expected results:
'/a/1234/r/Bar/s/Foo/a' // => {id: "1234", generic1: "Bar", name: "Foo"}
'/a/23456/r/Baz/s/Goo/a' // => {id: "1234", generic1: "Baz", name: "Goo"}
What could be the issue here? One piece of advice mentioned states the following:
To make a part of the path optional, enclose it with parentheses and add "?" [sic]
In my understanding, these paths should align with the specified route.