Implements simple breadcrumb functionality with vue-router

<script src="../dist/vue-breadcrumbs.min.js"></script>

Vue.use(VueBreadcrumbs)

$ npm install vue-breadcrumbs

import VueBreadcrumbs from 'vue-breadcrumbs'

Vue.use(VueBreadcrumbs)

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

router.map({
  '/': {
    component: Page,
    breadcrumb: 'Home Page',
    subRoutes: {
      '/foo': {
        component: Foo,
        breadcrumb: 'Foo Page'
      },
      '/bar': {
        component: Bar,
        breadcrumb: 'Bar Page'
      }
    }
  }
})

new VueRouter({
  routes: [
    {
      path: '/', 
      component: Page,
      meta: {
        breadcrumb: 'Home Page',
      },
      children: [
        {
          path: '/foo', 
          component: Foo,
          meta: {
            breadcrumb: 'Foo Page'  
          }
        },
        {
          path: '/bar', 
          component: Bar,
          meta: {
            breadcrumb: 'Bar Page'
          }
        }
      ]
    }
  ]
})