Scrum / vue-2-breadcrumbs

Vue breadcrumbs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Possible to render full breadcrumb path?

fipp opened this issue · comments

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?

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

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

@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

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

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