Breadcrumb.vue

<template>
  <div class="breadcrumb-container" v-if="crumbs.length > 0">
    <b-breadcrumb id="nav-breadcrumb">
      <b-breadcrumb-item
        v-for="(crumb, index) in crumbs"
        :key="index"
        :active="crumb.active"
        :to="crumb.to"
      >
        <b-icon-chevron-double-right class="mr-2" v-if="index !== 0" />
        {{ crumb.text }}
      </b-breadcrumb-item>
    </b-breadcrumb>
  </div>
</template>
<script>
const routeMap = {};
export default {
  created() {
    this.$router.options.routes.forEach(route => {
      routeMap[route.path] =
        route.meta && route.meta.breadcrumb
          ? route.meta.breadcrumb
          : route.name;
    });
  },
  computed: {
    crumbs() {
      if (this.$route.path === "/") {
        return [];
      }

      const pathArray = this.$route.path.split("/");
      // remove home route since it's a special case and we'll add it later
      pathArray.shift();

      let currentPath = "";
      const breadcrumbs = pathArray.reduce(
        (breadcrumbArray, path) => {
          currentPath += "/" + path;

          if (routeMap[currentPath]) {
            breadcrumbArray.push({
              path: currentPath,
              to: currentPath,
              text: routeMap[currentPath]
            });
          }
          return breadcrumbArray;
        },
        // initialize with home route
        [
          {
            path: "",
            to: "/",
            text: "Home"
          }
        ]
      );

      breadcrumbs[breadcrumbs.length - 1].active = true;

      return breadcrumbs;
    }
  }
};
</script>
<style lang="scss" scoped>
.breadcrumb-container {
  padding-left: 7rem;
  text-transform: uppercase;

  #nav-breadcrumb {
    border-radius: 0;
    margin-bottom: 0;
    background-color: transparent;

    .breadcrumb-item {
      &,
      & > a {
        color: $p1-light-green;
      }
      &.active span {
        font-weight: 800;
      }
      // hide the default >
      & + .breadcrumb-item::before {
        display: none;
      }
    }
  }
}
</style>