vue+element的面包屑导航，动态实现（简单好用）2021-09-23

element的面包屑导航没有切换事件，没有各种动态绑定什么的，但是面包屑却需要随页面变化而层级变化
这里，我采用watch监听加判断来搞定

<template>
  <el-card>
    <!-- 面包屑 注意面包屑的点击方法，要加native，因为组件事件触发需要它 -->
    <el-breadcrumb class="bread" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        v-for="(item, index) in breadNum"
        :key="index"
        :to="{ path: bread[index].path, query: bread[index].query }"
        @click.native="fnBreadClick"
      >{{ bread[index].text }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 子组件在这里进行动态渲染 -->
    <router-view />
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      bread: [
        { text: '所有课程', path: '/allClass/course' },
        { text: '章', path: '/allClass/chapter', query: {}},
        { text: '节', path: '/allClass/burl', query: {}},
        { text: '题', path: '/allClass/question', query: {}}
      ],
      breadNum: 1
    }
  },
  //重点在这里，通过watch监听$route来实现监听子组件切换，然后封装一个判断的方法
  //这里同样可以通过to from  来保留住那些跳转路由的参数，然后放到data中
  watch: {
    $route(to, from) {
      this.fnBreadClick()
    }
  },
  mounted() {
  //为了防止页面刷新后，breadNum重新回归1，就在这里也执行一次判断方法，这样在子层级中刷新页面
  //这个父组件的面包屑状态仍然是正确的
    this.fnBreadClick()
  },
  methods: {
  //这个方法通过判断路由中的name来判断当前是什么页面，然后切换bread要显示的面包屑数量来切换层级
  //当然有时候同层级可能是不同页面，但在case中单独处理就可以了
    fnBreadClick() {
      const nowpage = this.$route.name
      switch (nowpage) {
        case 'course':
          this.breadNum = 1
          break
        case 'chapter':
          this.breadNum = 2
          break
        case 'burl':
          this.breadNum = 3
          break
        case 'question':
          this.breadNum = 4
          break

        default:
          break
      }
    }
  }
}
</script>

这里面的判断都是根据router中的name的，所以，要写好router中的name

  {
        path: '/allClass',
        name: '/allClass',
        component: () => import('views/allClass'),
        redirect: '/allClass/course',
        children: [
          { path: 'course', name: 'course', component: () => import('views/allClass/course.vue') },
          { path: 'chapter', name: 'chapter', component: () => import('views/allClass/chapter.vue') },
          { path: 'burl', name: 'burl', component: () => import('views/allClass/burl.vue') },
          { path: 'question', name: 'question', component: () => import('views/allClass/question.vue') }
        ]
      },