Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible to render full breadcrumb path? #105

Closed
fipp opened this issue Oct 8, 2020 · 5 comments
Closed

Possible to render full breadcrumb path? #105

fipp opened this issue Oct 8, 2020 · 5 comments
Labels

Comments

@fipp
Copy link

fipp commented Oct 8, 2020

Hi, is it possible for <Breadcrumbs /> to render the full breadcumb path, e.g. Path 1 > Path 2 > Path 3 > Path 4, and not just the current one and the parent?

@Scrum
Copy link
Owner

Scrum commented Oct 9, 2020

The full path is always displayed for example in demo
Screenshot 2020-10-09 at 15 09 14

@Scrum Scrum added the question label Oct 9, 2020
@fipp
Copy link
Author

fipp commented Oct 12, 2020

Hmm strange. I'm getting the current page and the parent, not the grand-aprent when I'm on a grandchild page, with or without template. Using version 0.7.9. Here's my router config, do you see anything bad off the bat?

{
    mode: 'history',
    routes: [
      {
        path: '/my-service',
        name: 'FrontPage',
        component: FrontPage,
        meta: {
          breadcrumb: 'Front page'
        }
      },
      {
        path: '/my-service/cars',
        name: 'Cars',
        component: Cars,
        meta: {
          breadcrumb: {
            label: 'Cars',
            parent: 'FrontPage'
          }
        }
      },
      {
        path: '/my-service/car/:carId',
        name: 'CarPage',
        component: CarPage,
        meta: {
          breadcrumb: {
            label: 'Car',
            parent: 'Cars'
          }
        }
      },
    ],
  }

So in this instance, when I'm on /my-service/car/:carId. I see two items in the breadcrumb, "Car" and "Car", would like to see "Front page" as well

@Scrum
Copy link
Owner

Scrum commented Oct 12, 2020

@fipp Hello

  1. You are pointing the wrong way
      {
-        path: '/my-service/cars',
+        path: '/cars',
        name: 'Cars',
        component: Cars,
        meta: {
          breadcrumb: {
            label: 'Cars',
            parent: 'FrontPage'
          }
        }
      },
  1. I think it is better to use children for dynamic paths
{
  path: '/cars',
  name: 'Cars',
  component: Cars,
  meta: {
    breadcrumb: {
      label: 'Cars',
      parent: 'FrontPage'
    }
  },
  children: [
    {
      path: ':carId',
      name: 'CarPage',
      component: CarPage,
      meta: {
        breadcrumb: (params) => `${params.carId}`
      }
    }
  ]
}
  1. I realized that there is an error in displaying the path if there are more than one parent

@Scrum Scrum added bug and removed question labels Oct 12, 2020
Scrum added a commit that referenced this issue Oct 12, 2020
@Scrum Scrum closed this as completed in ca1831d Oct 12, 2020
@Scrum
Copy link
Owner

Scrum commented Oct 12, 2020

@fipp after you submit paths and install version 0.7.10 your path will be complete

@fipp
Copy link
Author

fipp commented Oct 12, 2020

Thanks @Scrum, I got the full path with 0.7.10. Kudos for a quick bug-fix! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants