vue动态面包屑导航的使用

喜欢ヅ旅行 2023-01-22 15:57 211阅读 0赞

动态面包屑导航是根据路由中的 `matched` 获取到的  
单独提取出面包屑导航栏组件

<template>
      <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="{ path: item.path }">
            <span>{ {  item.meta.title }}</span>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </template>
    
    <script>
    export default { 
      data () { 
        return { 
          levelList: null
        }
      },
      watch: { 
        $route () { 
          this.getBreadcrumb()
        }
      },
      created() { 
        this.getBreadcrumb()
      },
      methods: { 
        getBreadcrumb () { 
          let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
          const first = matched[0]
          if (!this.isIndex(first)) { 
            matched = [{  path: '/index', meta: {  title: '首页' } }].concat(matched)
            this.levelList = matched
          } else { 
            this.levelList = [{  path: '/index', meta: {  title: '首页' } }]
          }
        },
        isIndex (route) { 
          const redirect = route && route.redirect
          if (!redirect) { 
            return false
          }
          return redirect === '/index'
        }
      },
    }
    </script>
    
    <style lang="scss">
    /* breadcrumb transition */
    .breadcrumb-enter-active,
    .breadcrumb-leave-active { 
      transition: all .5s;
    }
    
    .breadcrumb-enter,
    .breadcrumb-leave-active { 
      opacity: 0;
      transform: translateX(20px);
    }
    
    .breadcrumb-move { 
      transition: all .5s;
    }
    
    .breadcrumb-leave-active { 
      position: absolute;
    }
    
    .app-breadcrumb.el-breadcrumb { 
      margin-left: 8px;
    }
    </style>

在布局组件中应用

<dBreadcrumb class="breadcrumb-container" />

![在这里插入图片描述][20210520193650855.png]

[20210520193650855.png]: /images/20221020/800deb59321b426bba1e11550cecdedb.png