Allow providing own RouterMatcher or allow access to it from Router

[ml1nk]

What problem is this solving

The RouterMatcher which can be created by createRouterMatcher allows us to extract metadata like the params of a route which are otherwise inaccessible inside Router (RouteRecordNormalized vs RouteRecordMatcher). Currently there is no way (known to me) to provide an existing RouterMatcher to createRouter or access it inside the Router object.

Proposed solution

1. add getMatcher() in Router
2. allow RouterMatcher in RouterOptions.routes

export const routerMatcher = createRouterMatcher(routes, {})
export const router = createRouter({
  routes: routerMatcher
})

3. add RouterOptions.matcher and ignore RouterOptions.routes if set

Describe alternatives you've considered

As a workaround it is currently possible to create router and routerMatcher separately and use addRoute on both of them whenever needed. This leads to two identical RouterMatcher objects which i want to avoid.

[posva]

This is intentionally not exposed to reduce API surface and allow internal changes without breaking changes for users. I have thought of exposing some of these APIs separately but I'm not 100% sure about allowing a matcher option. An RFC to explore the use cases of this would definitely be needed before adding it. It should also define the API needed by the RouteMatcher, which you can of course copy from Vue Router source code as a starting point.

Why do you need to extract params of a route param for?

[MohammadYounes]

We are implementing a dynamic breadcrumbs for deep nested navigation, resolving the correct links for parents hierarchy requires params ( as a work around, we had to create a new matcher instance to get the route record matcher keys then extract matching params from current route to avoid Discarded invalid param(s) warning).

[vincerubinetti]

Related comment and use case: #359 (comment)

[ReinisV]

a very simple use case -- matching routes on query parameters.

It has been stated multiple times that Vue router will not support that, and I understand the reasoning because the design of the routing implementation is such that query parameters are just some data that is exposed to the component as if though it was defined in the data() method, and it that case, I agree, it doesnt make sense to allow matching on query params.

but there are cases where someone might need to design a url that can switch to wholly different components, but requires to keep the url looking as if those different components are the exact same page.

example would be having a page for showing the statistics of your account, say /my-account/statistics.
now, if you wanted to provide two different views in which the page can be viewed for user convenience, it might make sense to create
/my-account/statistics?view=table
and
/my-account/statistics?view=chart
.

since it is still the same single /my-account/statistics resource, and you are just changing how the data about your statistics is displayed, it might not make sense to have two separate routes from a user navigation perspective, but it might make sense to have two Router routes so that each can match to a different Vue component that loads completely different stuff (a table with paging data, vs a chart with summary data).

this currently cannot be done, because the query parameters are fully ignored when matching.
If I as a developer could pass in my own matcher, I could handle this implementation and all of the issues that it causes downstream.

[cyrilluce]

My use case: get parent path of current RouterView, Very similar to @MohammadYounes 's breadcrumb feature.
Currentlly I can only get matched route, and it's path is raw define like /:id(\\d+), I have to restore to /${route.params.id}.

After read the source code, the RouteRecordMatcher's stringify method is exatly just what I need, but I can't get the reference.

[cyrilluce]

My use case: get parent path of current RouterView, Very similar to @MohammadYounes 's breadcrumb feature. Currentlly I can only get matched route, and it's path is raw define like /:id(\\d+), I have to restore to /${route.params.id}.

After read the source code, the RouteRecordMatcher's stringify method is exatly just what I need, but I can't get the reference.

UPDATE: I found router.resolve can resolve my case.

export function useAncestorPath() {
  const router = useRouter()
  const matchedRoute = inject(matchedRouteKey, null)

  return computed(() => {
    const matched = matchedRoute?.value
    if (!matched) {
      return ''
    }
    return router.resolve(matched, router.currentRoute.value).fullPath
  })
}

[posva]

FYI #2415