带参数路由面包屑的实现

主要参考：
https://segmentfault.com/a/1190000010574901
改进：

1. VUEX用于组件间通信。此问题无需进程间通信。
2. 面包屑最后一级（当前路由页面）应该是无链接状态。

最简代码（使用element组件库）：

<template>
  <el-breadcrumb separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
        <span v-if="index == breadList.length - 1">{{item.name}}</span>
        <router-link v-else :to="item.path">{{item.name}}</router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
export default {
  created() {
    this.getBreadcrumb()
  },
  data() {
    return {
      breadList: []
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  methods: {
    getBreadcrumb() {
      const breadNumber = typeof (this.$route.meta.breadNumber) !== 'undefined' ? this.$route.meta.breadNumber : 0
      const newBread = { name: this.$route.meta.title, path: this.$route.fullPath }
      this.breadList = JSON.parse(sessionStorage.getItem('breadListStorage')) || []
      this.breadList.splice(breadNumber, this.breadList.length - breadNumber, newBread)
      sessionStorage.setItem('breadListStorage', JSON.stringify(this.breadList))
    }
  }
}
</script>