How can i access to query object of $route?

meta: { authenticated: true, title: 'Test123', breadcrumb: (params) => { //Here i get only $route.params } }

I cant seem to be able to create the breadcrum like so:

Home/About/Consulting

Instead it renders:

Home/Consulting

Am i doing something wrong?

These are the routes
{
path: '/home',
name: 'home',
component: home,
meta: {
breadcrumb: {
label: 'Home'
}
},
},
{
path: '/about',
name: 'about',
component: about,
meta: {
breadcrumb: {
label: 'About',
parent: 'home'
}
},
},
{
path: '/it-consulting',
name: 'itconsulting',
component: itconsulting,
meta: {
breadcrumb: {
label: 'Consulting',
parent: 'about'
}
},
},

It seems this is the most flexible (while staying easy-to-use) breadcrumb solution for Vue.js.

…But I don't use Bootstrap — I use Bulma (which I really love) — So it would be great if the visual part could be completely customized.

Thank you!

Hi, in my project i am need full replace in parent breadcrumbs chain, some like that:
We have one unique page and two jump paths to it

Base > Group list > Group detail
Base > Member list > Member detail > Group detail

The first is main route in router tree to page with data, it used when user go from leftbar menu.
The second path is jumps to page, that path used when user go from leftbar menu to member detail page and use link to group.
All of i need is to show breadcrumb with that jumps path.
And in that case full replace parent chain in breadcrumbs will protect me from make two children tree in router.

Thank you in advance, and sorry for my bad english.

Is it possible to update the breadcrumb from inside the component?
Use case is, that I load an article async in the component and I would like to use the article name in the breadcrumb.
Is this already possible somehow or would it be a new feature?

Hi,

Thanks for the amazing work!

I'm using custom template like this, which is working fine on development environment:

Vue.use(VueBreadcrumbs, {
  template:  
  '  <nav v-if="$breadcrumbs.length" aria-label="breadcrumb" class="ncBreadcrumbs">\n' +  
  '    <localized-link class="icon-home-outline" tag="a" to="/""></localized-link>\n' +  
  '    <span v-for="(crumb, index, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumbItem" :class="[(index == $breadcrumbs.length - 1 ? \'breadcrumbCurrent\' : \'\')]" aria-current="page">\n' +  
  '      <span class="icon-right-open-outline"></span>' +  
  '      <localized-link v-if="index !== $breadcrumbs.length - 1" tag="a" to="{ path: getPath(crumb) }" class="breadcrumbText">{{ getBreadcrumb(crumb.meta.breadcrumbshort) }}</localized-link>' +  
  '      <span v-if="index == $breadcrumbs.length - 1" class="breadcrumbText" v-html="$t( getBreadcrumb(crumb.meta.breadcrumb) )"></span>' +  
  '    </span>\n' +  
  '  </nav>'  
});

It appears that the use of the custom template seems to require eval() or a similar method, and fails to load breadcrumbs into the page if 'unsafe-eval' isn't defined under script-src in the server's Content Security Policy headers.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src

Could you consider implementing custom template injection from a file template instead? Or maybe create a second implementation method, to allow old code compatibility ; that would allow the plugin to be compatible with secured server policies. :)

For the time being, I will keep it simple and inject a hard coded breadcrumb html on every page (as it's a small project, it's ok for that one but I will implement breadcrumbs in larger vue projects later in 2020, so that won't be possible on them 😅).

Cheers,
Charlie

Hi, thanks for this awesome lib!

My question is how to use in async way.

Lets say, Breadcrumb is to a product page and I want to show the product name

home -> category -> product name

Something like this (ie)

meta: {
  async breadcrumb() {
  const { data } = await api.get('product');
  const name = data.name;
  return {
    label: name
  };
  }
}

How to do that, if possible ?

Here is the scenario:

User clicks on a link to Page B
Page B is a parent of Page A

So the breadcrumb will look like this:
Page A > Page B

But Page B is a page representing a specific resource, so it should be like so:
Page A > Resource Name

The resource name is retrieved via API. I have tried modifying the label via $breadcrumbs and calling $forceUpdate to no avail.

Hi, I'm trying to do something like this:

breadcrumb: {
  label: routeParams => `route params name: ${routeParams.name}` },
  parent: 'Menus'
}

But when I look at the getBreadcumb function I noticed to my understanding it is not possible:

getBreadcrumb(bc: string | CallbackFunction | Breadcrumbs): string {  
   let name = bc;
   if(typeof name === "object") {
     name = name.label
   }
   if (typeof name === "function") {
     return name.call(this, this.$route.params);
   }
  return name;
}

Is it possible for you to cover this feature in the future? I think replacing:

   if(typeof name === "object") {
     name = name.label
   }

with:

  if(typeof name === "object") {
     if(typeof name.label === 'function) {
       return name.label.call(this, this.$route.params);
     } else {
       name = name.label
     }
  }

Would work and wouldn't be a breaking change

• cypress-vue-unit-test

Hi,

I'm actually using this plugin link for manage breadcrumbs on my site.
This not support the route params like /post/:id becasue vue block vue route by using Object.freeze as you can see on samturrell/vue-breadcrumbs#1

Your project does it support vue route params in breadcrumbs?

Just wanted to say that I spend multiple hours trying to figure out why the plugin was mixing up my route-params. Turns out because I used named routes, which seem to clash with the plugin for some reason.

This is not really documented, which would have been great for me, and very likely will be for others in the future.

My setup consists of webpack (with vue loader) and babel, for transpiling JavaScript into previous ES versions.

In IE 11 I get the following error on the following line of the output JavaScript file. The error points at the 378th character in the line.

Expected ':'

Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={install(Vue,options){Object.defineProperties(Vue.prototype,{$breadcrumbs:{get(){var _this=this,breadcrumbs=this.$route.matched.map(function(routeRecord){var path=routeRecord.path.length?routeRecord.path:"/",route=routeRecord;return Object.keys(_this.$route.params).forEach(function(param){path=route.path.replace(":"+param,_this.$route.params[param])},_this),route.path=path,route},this);return breadcrumbs}}});Vue.component("breadcrumbs",Object.assign({methods:{getBreadcrumb:function getBreadcrumb(bc){return"function"==typeof bc?bc(this.$route.params):bc}},template:`

As a result, the entire page fails to load.

I assume that babel has taken care of transpiling the script to a version compatible with IE 11, so I guess it's the breadcrumb code itself that is causing the issue. Just a guess though ;)

Module version used: latest so far (0.4.0)

• class
• outher property

Hi,
First of all, thank you for this useful plugin.

I've ran into an issue with dynamic parent breadcrumbs. When you have at least 3 levels of nested and every route has a breadcrumb function, the route in the middle is missing from the breadcrumbs.

It looks like it happens because it doesn't handle breadcrumb function when looking for parent routes.

Here is the PR #112. Could you take a look, please?

Thanks!

Hi,

I was trying out this plugin but never got it to work.
Is it still supposed to work with Vue 2.6.10 and Vue Router 3.0.7 ?

When I include the component I'm getting the following error.
"[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."

I'm kind of assuming I really should not enable runtimeCompiler to get this to work.

I can't see any way of defining what the routes parent should be.

Again to use an example from vue-2-crumbs it allows:

meta: {
    breadcrumb: { parent: 'dashboard' }
}

Unfortunately that plugin doesn't appear to work with SSR was hoping this one would!

Hi, thanks for your work. I'm not able to work parents feature properly. As I understand when i navigate to route with parent it will find it but nothing happens. Could you please help and explain?
children: [
{
path: '/',
component: ownCategories,
name: 'documents',
meta: {
breadcrumb: 'All'
},
},
{
path: 'filelist/:categoryId',
component: fileList,
name: 'fileList',
props: true,
meta: {
breadcrumb(){
const name = this.$route.params.name
return {label: name, parent: 'documents'}
}
}
},

Hey!

For example, I have that in routes:

{
  path: '/',
  name: 'home',
  component: page('home.vue'),
  meta: {
    breadcrumb: {
      label: 'Home',
      icon: 'home',
    }
  },
},

So in this case route home has icon key and it should output an icon (font awesome, for example) instead of label.

Is it possible? crumb.meta.breadcrumb.icon gives me null everytime.

Can we customize breadcrumb template like this?
If no, can add a fast commit for this

Vue.use(VueBreadcrumbs, {
  template:
    '<b-container class="breadcrumb pt-3 mb-0" v-if="$breadcrumbs.length"> ' +
      '<router-link class="breadcrumb-item" to="/">Home</router-link> ' +
      '<router-link class="breadcrumb-item" v-for="(crumb, key) in $breadcrumbs" :to="linkProp(crumb)" :key="key">{{ crumb | crumbText }}</router-link> ' +
    '</b-container>'
})

You can easy inspire by this https://github.com/samturrell/vue-breadcrumbs/blob/master/src/index.js
I need very soon this update, please hope you add this feature

I like that you allow specifying a function for a route's breadcrumb so that the text can be dynamically generated.

To expand on that idea, it would be great to have the current route parameters passed into the breadcrumb function so that the consumer could use those params as well.

For example, if I have a route /customer/:id, I'd like to be able to use the id route parameter to lookup the customer name so that I can display breadcrumbs like this:

Home > Customers > John Doe

I'd be happy to submit a pull request for this feature if you'd take it.

Nuxt routes are dynamically generated, so I can't edit or shouldn't touch the router.js So how can I integrate it into Nuxt?

Hi, please correct a typo

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?

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?

Hey,

I am writing a CRUD type app that has an Index, Show, New etc. pages. An excerpt from the routes looks like this:

{
                    component: LayoutPage,
                    path: '/services',
                    meta: {
                        breadcrumb() {
                            return (this.$route.name === 'services') ? '' : 'Services';
                        }
                    },
                    children: [
                        {
                            component: ServicesIndex,
                            name: 'services',
                            path: '/',
                            meta: {
                                breadcrumb: 'Services'
                            },
                        }, {
                            component: ServicesNew,
                            name: 'services-new',
                            path: 'new',
                            meta: {
                                breadcrumb: 'New'
                            }
                        }

If I don't put that logic into breadcrumb function of the /services parent, it will always show the breadcrumb li as a link (presumably because it matches the. 'services' route.

But now it creates the Breadcrumb Home / / Services. (Home is defined further up the routes)

Can the library be updated to exclude blank breadcrumb functions?

Cheers!

In this demo http://inside-demo.github.io/vue-demo/
whn breadcrumbs look like Feeds / Foo
Feeds link is "/feeds/foo" bit it should be "/feeds"

Hi. I want to change template inside my component. The problem is: method getBreadcrumb(crumb.meta.breadcrumb) is not defined on the instance. How I can fix that?
example of my code:

<template id="crumbs">
  <nav v-if="$breadcrumbs.length" class="breadcrumb" aria-label="breadcrumb">
    <ul class="breadcrumb">
      <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
        <router-link :to="{ path: crumb.path }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
      </li>
    </ul>
  </nav>
</template>
<script>
import Vue from 'vue';
import breadcrumbs from 'vue-2-breadcrumbs';

Vue.use(breadcrumbs, {
  template: '#crumbs'
});

My route is defined like this:

{
            path: ':catId/:id(new|\\d+)',
            name: 'EntityCreate',
            component: EntityManualCU,
            meta: {
              breadcrumb: 'Send Entity',
            },
          },

In breadcrumb route path generated as http://localhost:8080/entities/2/new(new%7C/d+)

Just wondering how I would go about showing crumbs with more than one parent, e.g

Home > Directory > Business Name

Thanks

hi thank you for the library, i found maybe a bug that in nuxt 2 i cant update the template with the object parameter when registering the plugins,

here i showed you if i registered without defining a template, Vue.use(VueBreadcrumbs) it is working fine,

but if i add this code

const template = {
   template: '<div class="breadcrumbs">Custom Navbar</div>',
}

Vue.use(VueBreadcrumbs, template)

notice above image there is function inside a comments that breadcrumb should be located, may i know if i am doing something wrong or this is a bug? thank you

The path under node_modules are very long (more than 260 characters), which in windows is a problem. I cannot use this module unless this is fixed.
Thanks!.

C:\rui\MyProject\clientApp\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src\docs\node_modules\vue-2-breadcrumbs\src

First, thanks for your work, it works well with quasar and ssr.

I'm looking to override the default template (https://github.com/Scrum/vue-2-breadcrumbs#options) to use the breadcrumb quasar component but it does not affect the default one

The documentation doesn't say how to add them to a component.

The vue-2-crumbs package makes <app-breadcrumbs> available - but I can't see anything equivalent in this package.

Is it possible to prepend all breadcrumbs with a link back to home.

So at website.com the breadcrumbs show Home.

At website.com/foo the breadcrumbs now show Home / Foo.

At website.com/foo/bar the breadcrumbs now show Home / Foo / Bar.

how to set parent with query params?