Go to a non named matched route with params

[Tofandel]

Version

3.5.1

Reproduction link

https://codesandbox.io/s/vue-router-forked-1td7i?file=/src/main.js

Steps to reproduce

Click on Go to Todo, click on About

What is expected?

To have a property in a matched route that is able to be passed to a router-link without needing a name

What is actually happening?

It is currently impossible to create a link to a matched route if it's not named and with params, because the path in a matched route is not interpolated and contains the params definition

In the case where you have a default child route (eg: path = '') using a name would also not work because it would not go to the desired child route (and there is a warning in the console about that)

---

Having a fullPath property like on the $route or something similar to each matched route would be a good addition so we can go up in the route tree in a generic way

It was also brought up in #1435 but as I demonstrated a named route is not a generic solution

[posva]

This is expected, matched is not a resolved location and path contains params. They are primarily meant for internal or advanced usage so it's up to you to filter them if you want to use them to build lists of links. Note you can also use $route.resolve() / $route.match() to generate the fullPath

[Tofandel]

How exactly do you replace the params in the path using $router.resolve() or $router.match() I tried passing everything, checked the doc and checked the code.. I can't figure out how to get /foo/bar from a /:param/bar string

[kleinfreund]

Coming back to this because I’m trying to resolve unresolved route locations from route.matched using router.resolve. I’m running into issues with this as well.

In simplified terms, I try to generate breadcrumbs from a set of routes which are marked with meta.isBreadcrumb. As a first step, I get a list of breadcrumb routes using const matchedRoutes = route.matched.filter((matchedRoute) => matchedRoute.meta.isBreadcrumb === true) where route is the current route.

Now I found that router.resolve(matchedRoute) works differently depending on the nature of the route definition: if matchedRoute has name as undefined (i.e. the the route definition has no name), router.resolve will not return a route location with a resolved path. It will have all dynamic segments in the colon notation (e.g. path/:param).

In my breadcrumbs code, I work around this by simply naming all routes even though I would prefer to only name those that I intend to navigate to.