Feature: use functions on meta breadcrumb for dynamic crumb name

CHANGELOG.md

@@ -43,7 +43,7 @@
   * Docs folder
   * Version bump and updated changelog
 
-1.0.0 / 2017-04-30
+1.0.0 / 2017-04-29
 ==================
 
   * 1.0.0

dist/vue-breadcrumbs.common.js

@@ -6,7 +6,7 @@
 'use strict';
 
 function install(Vue, options) {
-  function getMatchedRoutes(routes) {
+  var getMatchedRoutes = function getMatchedRoutes(routes) {
     // Convert to an array if Vue 1.x
     if (parseFloat(Vue.version) < 2) {
       routes = Object.keys(routes).filter(function (key) {
@@ -17,25 +17,14 @@ function install(Vue, options) {
     }
 
     return routes;
-  }
+  };
 
   // Add the $breadcrumbs property to the Vue instance
   Object.defineProperty(Vue.prototype, '$breadcrumbs', {
     get: function get() {
-      var crumbs = [];
-
-      var matched = getMatchedRoutes(this.$route.matched);
-
-      matched.forEach(function (route) {
-        // Backwards compatibility
-        var hasBreadcrumb = parseFloat(Vue.version) < 2 ? route.handler && route.handler.breadcrumb : route.meta && route.meta.breadcrumb;
-
-        if (hasBreadcrumb) {
-          crumbs.push(route);
-        }
+      return getMatchedRoutes(this.$route.matched).filter(function (route) {
+        return parseFloat(Vue.version) < 2 ? route.handler && route.handler.breadcrumb : route.meta && route.meta.breadcrumb;
       });
-
-      return crumbs;
     }
   });
 
@@ -58,25 +47,22 @@ function install(Vue, options) {
           path: crumb.handler && crumb.handler.fullPath ? crumb.handler.fullPath : crumb.path,
           params: this.$route.params
         };
-      }
-    },
+      },
+      resolveCrumbName: function resolveCrumbName(crumb) {
+        var crumbName = parseFloat(Vue.version) < 2 ? crumb.handler.breadcrumb : crumb.meta.breadcrumb;
 
-    filters: {
-      // Display the correct breadcrumb text
-      // depending on the Vue version
-      crumbText: function crumbText(crumb) {
-        return parseFloat(Vue.version) < 2 ? crumb.handler.breadcrumb : crumb.meta.breadcrumb;
+        return typeof crumbName === 'function' ? crumbName(this.$route.params) : crumbName;
       }
     },
 
-    template: '<nav class="breadcrumbs" v-if="$breadcrumbs.length"> ' + '<ul> ' + '<li v-for="crumb in $breadcrumbs"> ' + '<router-link :to="linkProp(crumb)">{{ crumb | crumbText }}</router-link> ' + '</li> ' + '</ul> ' + '</nav>'
+    template: '\n      <nav class="breadcrumbs" v-if="$breadcrumbs.length">\n        <ul>\n          <li v-for="crumb in $breadcrumbs">\n            <router-link :to="linkProp(crumb)">{{ resolveCrumbName(crumb) }}</router-link>\n          </li>\n        </ul>\n      </nav>\n    '
   };
 
-  options = Object.assign(defaults, options);
+  var componentOptions = Object.assign(defaults, options);
 
   // Add a default breadcrumbs component
-  if (options.registerComponent) {
-    Vue.component('breadcrumbs', options);
+  if (componentOptions.registerComponent) {
+    Vue.component('breadcrumbs', componentOptions);
   }
 }
 

dist/vue-breadcrumbs.js

@@ -10,7 +10,7 @@
 }(this, function () { 'use strict';
 
   function install(Vue, options) {
-    function getMatchedRoutes(routes) {
+    var getMatchedRoutes = function getMatchedRoutes(routes) {
       // Convert to an array if Vue 1.x
       if (parseFloat(Vue.version) < 2) {
         routes = Object.keys(routes).filter(function (key) {
@@ -21,25 +21,14 @@
       }
 
       return routes;
-    }
+    };
 
     // Add the $breadcrumbs property to the Vue instance
     Object.defineProperty(Vue.prototype, '$breadcrumbs', {
       get: function get() {
-        var crumbs = [];
-
-        var matched = getMatchedRoutes(this.$route.matched);
-
-        matched.forEach(function (route) {
-          // Backwards compatibility
-          var hasBreadcrumb = parseFloat(Vue.version) < 2 ? route.handler && route.handler.breadcrumb : route.meta && route.meta.breadcrumb;
-
-          if (hasBreadcrumb) {
-            crumbs.push(route);
-          }
+        return getMatchedRoutes(this.$route.matched).filter(function (route) {
+          return parseFloat(Vue.version) < 2 ? route.handler && route.handler.breadcrumb : route.meta && route.meta.breadcrumb;
         });
-
-        return crumbs;
       }
     });
 
@@ -62,25 +51,22 @@
             path: crumb.handler && crumb.handler.fullPath ? crumb.handler.fullPath : crumb.path,
             params: this.$route.params
           };
-        }
-      },
+        },
+        resolveCrumbName: function resolveCrumbName(crumb) {
+          var crumbName = parseFloat(Vue.version) < 2 ? crumb.handler.breadcrumb : crumb.meta.breadcrumb;
 
-      filters: {
-        // Display the correct breadcrumb text
-        // depending on the Vue version
-        crumbText: function crumbText(crumb) {
-          return parseFloat(Vue.version) < 2 ? crumb.handler.breadcrumb : crumb.meta.breadcrumb;
+          return typeof crumbName === 'function' ? crumbName(this.$route.params) : crumbName;
         }
       },
 
-      template: '<nav class="breadcrumbs" v-if="$breadcrumbs.length"> ' + '<ul> ' + '<li v-for="crumb in $breadcrumbs"> ' + '<router-link :to="linkProp(crumb)">{{ crumb | crumbText }}</router-link> ' + '</li> ' + '</ul> ' + '</nav>'
+      template: '\n      <nav class="breadcrumbs" v-if="$breadcrumbs.length">\n        <ul>\n          <li v-for="crumb in $breadcrumbs">\n            <router-link :to="linkProp(crumb)">{{ resolveCrumbName(crumb) }}</router-link>\n          </li>\n        </ul>\n      </nav>\n    '
     };
 
-    options = Object.assign(defaults, options);
+    var componentOptions = Object.assign(defaults, options);
 
     // Add a default breadcrumbs component
-    if (options.registerComponent) {
-      Vue.component('breadcrumbs', options);
+    if (componentOptions.registerComponent) {
+      Vue.component('breadcrumbs', componentOptions);
     }
   }
 

example/index.js

@@ -66,7 +66,7 @@ var AboutFoo = {
 var AboutBar = {
   path: 'bar',
   component: {
-    template: '<p>About our foo!</p>'
+    template: '<p>About our bar!</p>'
   },
   meta: {
     breadcrumb: 'Bar About'
@@ -90,15 +90,16 @@ var About = {
   ]
 }
 
-
 var Item = {
   path: ':id',
   name: 'store-item',
   component: {
     template: '<p>test This is item {{ $route.params.id }}</p>'
   },
   meta: {
-    breadcrumb: 'View item'
+    breadcrumb(params) {
+      return 'View item ' + params.id
+    }
   }
 }