<commit_before># <a href="https://vuejs.org" target="_blank"><img valign="text-bottom" height="49" src="https://vuejs.org/images/logo.png"></a> breadcrumbs 
> Vue breadcrumbs builds on the official [vue-router](https://github.com/vuejs/vue-router) package to provide simple breadcrumbs. [Demo](https://scrum.github.io/vue-2-breadcrumbs/)

[![Travis Build Status](https://img.shields.io/travis/Scrum/vue-2-breadcrumbs/master.svg?style=flat-square&label=unix)](https://travis-ci.org/Scrum/vue-2-breadcrumbs)[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg?style=flat-square)](https://vuejs.org/)[![node](https://img.shields.io/node/v/post-sequence.svg?style=flat-square)]()[![npm version](https://img.shields.io/npm/v/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![Dependency Status](https://david-dm.org/scrum/vue-2-breadcrumbs.svg?style=flat-square)](https://david-dm.org/scrum/vue-2-breadcrumbs)[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/sindresorhus/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/vue-2-breadcrumbs.svg?style=flat-square)](https://coveralls.io/r/Scrum/vue-2-breadcrumbs)

[![npm downloads](https://img.shields.io/npm/dm/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![npm](https://img.shields.io/npm/dt/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)

## Install

```bash
$ npm install vue-2-breadcrumbs
```

> **Note:** This project is compatible with node v8+


## Usage

### Bundler (Webpack, Rollup)
```js
import Vue from 'vue';
import Breabcrumbs from 'vue-2-breadcrumbs';

Vue.use(Breabcrumbs);
```

### Browser

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-2-breadcrumbs/dist/vue-2-breadcrumbs.min.js"></script>
<script>
// As a plugin
Vue.use(VueBreadcrumbs.VueBreadcrumbsPlugin);
</script>
```

## Example  
```js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueBreadcrumbs from 'vue-2-breadcrumbs';

Vue.use(VueRouter);
Vue.use(VueBreadcrumbs);

const Feeds = {template: '<div><router-view/></div>'};
const Feed = {template: '<div><h2>Feed</h2></div>'};
const Biz = {template: '<div><h2>Biz</h2></div>'};
const Foo = {template: '<div><h2>Foo</h2></div>'};
const Bar = {template: '<div><h2>Bar</h2></div>'};
const Baz = {template: '<div><h2>Baz</h2></div>'};
const View = {template: '<div><h2>{{ $route.params }}</h2></div>'};

const router = new VueRouter({
  routes: [
    {path: '/', redirect: '/feeds'},
    {
      path: '/feeds',
      component: Feeds,
      meta: {
        breadcrumb: 'Feeds'
      },
      children: [
        {
          path: '',
          component: Biz
        },
        {
          path: 'foo',
          component: Foo,
          meta: {
            breadcrumb: () => `foo ${1 + 1}`
          }
        },
        {
          path: 'bar',
          component: Bar,
          meta: {
            breadcrumb: 'bar'
          }
        },
        {
          name: 'baz',
          path: 'baz',
          component: Baz,
          meta: {
            breadcrumb: function () {
              const {name} = this.$route;
              return `name "${name}" of context $route`;
            }
          }
        },
        {
          path: ':id',
          component: Feed,
          meta: {
            breadcrumb: routeParams => `Other Feed ${routeParams.id}`
          },
          redirect: {
            name: 'view'
          },
          children: [{
            path: 'view',
            name: 'view',
            component: View,
            meta: {
              breadcrumb: 'View'
            }
          }]
        }
      ]
    }
  ]
});

new Vue({
  router,
  template: `
    <div id="app" class="container">
        <ul class="nav">
            <li class="nav-item  dropdown">
                <router-link to="/feeds" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Feeds</router-link>
                <div class="dropdown-menu">
                    <router-link to="/feeds/foo" class="dropdown-item">Foo</router-link>
                    <router-link to="/feeds/bar" class="dropdown-item">Bar</router-link>
                    <router-link to="/feeds/baz" class="dropdown-item">Baz</router-link>
                    <router-link to="/feeds/1" class="dropdown-item">Other Feed 1</router-link>
                    <router-link to="/feeds/2" class="dropdown-item">Other Feed 2</router-link>
                    <router-link to="/feeds/3" class="dropdown-item">Other Feed 3</router-link>
                </div>
            </li>
        </ul>
        <breadcrumbs/>
        <router-view/>
    </div>
`
}).$mount('#app');
```
## Options
> An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:

```js
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';

Vue.use(VueBreadcrumbs, {
  template:
    '        <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
    '            <ol class="breadcrumb">\n' +
    '                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
    '                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
    '                </li>\n' +
    '            </ol>\n' +
    '        </nav>'
});
```
<commit_msg>docs: perf usege, close #63<commit_after># <a href="https://vuejs.org" target="_blank"><img valign="text-bottom" height="49" src="https://vuejs.org/images/logo.png"></a> breadcrumbs 
> Vue breadcrumbs builds on the official [vue-router](https://github.com/vuejs/vue-router) package to provide simple breadcrumbs. [Demo](https://scrum.github.io/vue-2-breadcrumbs/)

[![Travis Build Status](https://img.shields.io/travis/Scrum/vue-2-breadcrumbs/master.svg?style=flat-square&label=unix)](https://travis-ci.org/Scrum/vue-2-breadcrumbs)[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg?style=flat-square)](https://vuejs.org/)[![node](https://img.shields.io/node/v/post-sequence.svg?style=flat-square)]()[![npm version](https://img.shields.io/npm/v/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![Dependency Status](https://david-dm.org/scrum/vue-2-breadcrumbs.svg?style=flat-square)](https://david-dm.org/scrum/vue-2-breadcrumbs)[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/sindresorhus/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/vue-2-breadcrumbs.svg?style=flat-square)](https://coveralls.io/r/Scrum/vue-2-breadcrumbs)

[![npm downloads](https://img.shields.io/npm/dm/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)[![npm](https://img.shields.io/npm/dt/vue-2-breadcrumbs.svg?style=flat-square)](https://www.npmjs.com/package/vue-2-breadcrumbs)

## Install

```bash
$ npm install vue-2-breadcrumbs
```

> **Note:** This project is compatible with node v8+


## Usage

### Bundler (Webpack, Rollup)
```js
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';

Vue.use(VueBreadcrumbs);
```

### Browser

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-2-breadcrumbs/dist/vue-2-breadcrumbs.min.js"></script>
<script>
// As a plugin
Vue.use(VueBreadcrumbs.VueBreadcrumbsPlugin);
</script>
```

## Example  
```js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueBreadcrumbs from 'vue-2-breadcrumbs';

Vue.use(VueRouter);
Vue.use(VueBreadcrumbs);

const Feeds = {template: '<div><router-view/></div>'};
const Feed = {template: '<div><h2>Feed</h2></div>'};
const Biz = {template: '<div><h2>Biz</h2></div>'};
const Foo = {template: '<div><h2>Foo</h2></div>'};
const Bar = {template: '<div><h2>Bar</h2></div>'};
const Baz = {template: '<div><h2>Baz</h2></div>'};
const View = {template: '<div><h2>{{ $route.params }}</h2></div>'};

const router = new VueRouter({
  routes: [
    {path: '/', redirect: '/feeds'},
    {
      path: '/feeds',
      component: Feeds,
      meta: {
        breadcrumb: 'Feeds'
      },
      children: [
        {
          path: '',
          component: Biz
        },
        {
          path: 'foo',
          component: Foo,
          meta: {
            breadcrumb: () => `foo ${1 + 1}`
          }
        },
        {
          path: 'bar',
          component: Bar,
          meta: {
            breadcrumb: 'bar'
          }
        },
        {
          name: 'baz',
          path: 'baz',
          component: Baz,
          meta: {
            breadcrumb: function () {
              const {name} = this.$route;
              return `name "${name}" of context $route`;
            }
          }
        },
        {
          path: ':id',
          component: Feed,
          meta: {
            breadcrumb: routeParams => `Other Feed ${routeParams.id}`
          },
          redirect: {
            name: 'view'
          },
          children: [{
            path: 'view',
            name: 'view',
            component: View,
            meta: {
              breadcrumb: 'View'
            }
          }]
        }
      ]
    }
  ]
});

new Vue({
  router,
  template: `
    <div id="app" class="container">
        <ul class="nav">
            <li class="nav-item  dropdown">
                <router-link to="/feeds" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Feeds</router-link>
                <div class="dropdown-menu">
                    <router-link to="/feeds/foo" class="dropdown-item">Foo</router-link>
                    <router-link to="/feeds/bar" class="dropdown-item">Bar</router-link>
                    <router-link to="/feeds/baz" class="dropdown-item">Baz</router-link>
                    <router-link to="/feeds/1" class="dropdown-item">Other Feed 1</router-link>
                    <router-link to="/feeds/2" class="dropdown-item">Other Feed 2</router-link>
                    <router-link to="/feeds/3" class="dropdown-item">Other Feed 3</router-link>
                </div>
            </li>
        </ul>
        <breadcrumbs/>
        <router-view/>
    </div>
`
}).$mount('#app');
```
## Options
> An options object can also be passed into the plugin to specify your own template and rendering methods if desired. For example:

```js
import Vue from 'vue';
import VueBreadcrumbs from 'vue-2-breadcrumbs';

Vue.use(VueBreadcrumbs, {
  template:
    '        <nav v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
    '            <ol class="breadcrumb">\n' +
    '                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
    '                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
    '                </li>\n' +
    '            </ol>\n' +
    '        </nav>'
});
```

{'fraction_non_alphanumeric': 0.19155500705218617, 'fraction_numerical': 0.00846262341325811, 'mean_word_length': 2.476861783634692, 'pattern_counts': {'":': 0, '<': 139, '<?xml version=': 0, '>': 149, 'https://': 46, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1907227', 'n_tokens_mistral': 4029, 'n_tokens_neox': 3930, 'n_words': 610}