open matcher in router object

[suningkooboo]

What problem is this solving

We are trying to support two kinds of page URLs without prefix

• product category for example before is /product/list/xxxx now is /xxxx
• wildcard content pages.

So any wildcard pages need to dynamic try the match in product categories, fallback to wildcard content pages if not matched.

I plan to change matcher behavior a bit but it's not opened in router object in latest 4.2.5 version (I use Nuxt3).

BTW I successfully did above feature before in Nuxt2 with old vue-router version.

Proposed solution

In createRouter return { currentRoute, matcher, ... }

Describe alternatives you've considered

No response

[posva]

You can achieve this with named routes and a navigation guard because named routes skip parsing to match the route record. The actual code depends on what you need but usually the navigation guard will check if the id belongs to anything and redirect. That being said, I discourage you from having such URLs, they're usually confusing for a public-facing API and it's better to have a URL with the prefixes.

Regarding the proposal. The matcher cannot be imported like that because it belongs to the router instance. It's currently private but it might be exposed in the future to let users provide their own version, the actual API will still go through a proper RFC with all the needed details

[suningkooboo]

@posva Thanks for the reply. Agree with "I discourage you from having such URLs", but I found more clients requesting this feature, possible a trend. I guess the reason is product category tree is looked as a part of good sitemap. The challenge is product category tree is dynamic and big so I won't implement it in static pre-set route table.

It would be good if vue-router has a clean way to support a dynamic URL <--> route. It not just affect URL resolve to route but also a route generated URL. We still define the route as { name: 'product-lister-slug', path: 'product/lister/{slug}' }.

The matcher rewrite trick (I mentioned in question) advantage is everything else in coding no need to change but all part related to product category URL auto changed to /xxxx silently. This include

• NuxtLink href display
• Link click navigation
• URL entry route dispatch in both SSR/SPA
• The URL show in browser.