vue面包屑多级受限

Vue 多层级面包屑

可以实现面包屑存储，就是很一般。通过判断有没有传参显示是否层级页面，如果没有传参，就会清空数组，保留首页和当前页面的路径。

这是面包屑页面的代码

<el-breadcrumb-item
      v-for="(item, index) in breadRouter"
      :key="item.path"
    >   
      <span v-if="index == breadRouter.length - 1" class="no-redirect">{{
        item.name
      }}</span>
      <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
    </el-breadcrumb-item>
  watch: {
    $route(route) {
      if (route.path.startsWith('/redirect/')) {
        return;
      }
      this.getBreadcrumb(route);
},
 created() {
       this.getBreadcrumb();
 },
 getBreadcrumb() {
  if (JSON.stringify(this.$route.query) === '{}') {
    this.$store.commit('bread/clearParams');
  }
  this.$store.commit('bread/saveParams', {
    path: this.$route.path,
    name: this.$route.meta.title,
    query: this.$route.query || {}
  });
},

这是vuex的代码

 state: {
    breadRouter: getStore({ name: 'BREAD_ROUTER' }) || [{
        path: '/dashboard',
        name: '系统首页'
    }],
},
 saveParams(state, obj) {
       let ssIndex = state.breadRouter.findIndex((item, index) => {
            return item.path === obj.path
        });
        if ( ssIndex >-1) {
            //删除ssIndex下标 以后的面包屑。 splice 从下标开始删，所有需要+1；
            state.breadRouter.splice(ssIndex + 1)
        } else {
            // 添加面包屑
            state.breadRouter.push(obj)
        }
        setStore({ name: 'BREAD_ROUTER', content: state.breadRouter, type: 'session' })
    },
   clearParams(state) {
        state.breadRouter = [{
            path: '/dashboard',
            name: '系统首页'
        }];
        setStore({ name: 'BREAD_ROUTER', content: state.breadRouter, type: 'session' })
    }