element-ui面包屑的用法

小磊Q前端

于 2020-10-16 09:51:32 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wangyl1995/article/details/109110615

vue 专栏收录该内容

3 篇文章

订阅专栏

这是一个Vue.js项目的面包屑导航组件代码实现。通过遍历路由匹配信息并结合sessionStorage中的数据，动态生成面包屑路径，同时包含自定义图标功能。代码中使用了el-breadcrumb和el-breadcrumb-item组件，并在路由变化时更新面包屑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="bread">
     <el-breadcrumb class="breadcrumb" separator="/">
            <!-- <el-breadcrumb-item v-if="erpName">{{erpName}}</el-breadcrumb-item> -->
            <el-breadcrumb-item
                v-for='(item,index) of list'
                :key='index'
				v-if='item.name'>
                <i class="iconfont" :class="item.meta.icon"></i>
				{{item.name}}
			</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
        list: null,
        icon:[]
    }
  },
  created () {
      this.getbread ();
  },
   watch: {
      $route() {
        this.getbread ();
      }
  }
  methods: {
   getbread () {
        this.icon= JSON.parse(sessionStorage.getItem('menu'))
        let matched = this.$route.matched.filter(item => item.name);
        const first = matched[0];
        this.list = matched;
        this.erpName = sessionStorage.getItem('erpName')
    }
  },
 
}
</script>

<style lang="less" scoped>
 .bread {
   background-color: #fff;
   padding: 15px;
   margin: 10px 0;
 }
</style>