Using params within breadcrumb label

I’m part way through integrating this library into a mature app and am really impressed with how flexible and powerful it is. Great work!

One quirk of our existing routing is that from a list page /items, an individual item would be located at /items/view/X452.

The path for this route is expressed as:

{
  path: '/items',
  children: [{
    'view/:id'
  }]
}

And the auto generated breadcrumb trail is

Home / Items / view/X452

I can resolve this on per page basis by using breadcrumbService.set, but given the data I want is already in the params, it would be nice for the breadcrumb label to be able to interpolate these values.

A more common use-case for this might be:

{
  path: '/orders',
  children: [{
    ':id',
    data: { breadcrumb: 'Viewing order :id` }
  }]
}

Which would generate

Home / Orders / Viewing order 45

I have assumed a simple interpolation syntax in the breadcrumb label above.

I’ve had a look at the code and would be reasonably confident creating a pull request for this, but I wanted to raise it as a feature request first to gather your feedback on the idea.

Thanks! 🙂

[udayvunnam]

@chad-smith I am close to having an implementation similar to

breadcrumb: (id, ...rest){
 return `Viewing order ${id}`
}

This will be released in next minor version

[udayvunnam]

Yes this is a bug. We don’t need user to specify ~{breadcrumb: { alias: '@id' } }~ we just need {breadcrumb: { alias: 'id' } } with breadcrumbService.set('@id', 'MapingLabel').

This bug slipped since I changed the tests verifying alias to test breadcrumb as a function. Going to add a fix and additional test for this.

Thanks! Fix has been released with 6.1.1 @chad-smith