Add fullpath in matched object

[issaTan]

What problem does this feature solve?

I want to create a breadcrumb use the route.matched, but when I has the paramas in the router path, it doesn't work because the route.matched object only return the path but not fullpath.
example:

{
   path: '/course',
   name: 'Course',
   component: Layout,
   children: [{
     path: ':cousrId/edit',
     name: 'CourseEdit',
     component: Course,
     children: [{
       path: 'lesson',
       name: 'CourseLesson',
       component: CourseLesson
     }]
   }]
}

I want to create a breadcrumb like

<a href="/course">course</a> > <a href="/course/2/edit">course edit</a> > <a href="">course edit lesson</a>

when I click the course edit link, I can get the params courseId === 2, but I only get the path /course/:courseId/edit in the router.matched[1], the params doed not resolved, I could not got the real courseId in the route.mathed object.

(我想使用route.matched 创建一个面包屑，但当我的路径中参数例如courseId 时，route.matched 返回的path 是未解析参数的 /course/:courseId/edit。或许是我思路错了？请指教)

What does the proposed API look like?

resolved the params in each object at route.matched object base on the current url

[{
  path: '/course/:courseId/edit,
  fullpath: '/course/2/edit
}]

[posva]

why don't you use $route.fullPath?

[LinusBorg]

@posva I think he wants to create a link for each route entry in the $route.matched array:

/users -> /users/posva -> /users/posva/edit

but that should be easy with the route names:

<router-link v-for="route in $route.matched.reverse()" :to="{ name: route.name }">
  {{ route.name }}
</router-link>

[LinusBorg]

I close this because I believe I have shown that named routes already solve that problem.

[issaTan]

@LinusBorg Thank you very much !! The router name had solved the problem.

[cwirz]

@LinusBorg Could you describe me why this is possible without passing the props to the :to="{ name: route.name }"?

[LinusBorg]

Oh, actually it isn't, my example was not meant to be complete breadcrumb-solution, I was merely deomnstrating how to form router-links from $route.matched.

You could store any other breadcrumb-related information in the route's meta property.

[Tofandel]

A named route is not a generic solution, as it's possible to have a default child route

{
  path: "/",
  component: Layout,
  name: "fake-home", //There shouldn't be a name here or vue-router will warn
  children: [
    {
      path: "", //User should land here, but when going to the named route "fake-home" the logic is not respected
      name: "real-home",
      component: Home,
    },
    {
      path: "todos",
      name: "todos",
      component: Todos,
    }
  ]
}

And in that case going to the named route will not go to the desired route (and also vue-router will warn about it)

@posva Using fullPath would indeed be perfect, except it doesn't exist on matched routes