Vue2面包屑导航

Vue2面包屑导航

定义路由

export default new VueRouter({
 routes: [
{
  path: '/',
  name: 'Home',
  // components:HelloWorld
  component: () => import("../views/HomeView"),
},

{
  // 保单管理
  path: "/Home",
  component: () => import("@/views/Home"),
  meta: {
    breadcrumb: '保单管理'
  },
  children: [
    // 保单管理
    {
      path: "/InsuranceManagement/policyAdministration/index",
      component: () => import("@/views/InsuranceManagement/policyAdministration/index"),
      meta: {
        breadcrumb: '保单管理'
      },
    },
    {
      path: "/InsuranceManagement/claimsCaseManagement/index",
      component: () => import("@/views/InsuranceManagement/claimsCaseManagement/index"),
      meta: {
        breadcrumb: '理赔案件管理'
      },
    },

    {
      path: "/InsuranceManagement/policyAdministration/details",
      component: () => import("@/views/InsuranceManagement/policyAdministration/details"),
      meta: {
        breadcrumb: '保单详情'
      },
    },
    {
      path: "/InsuranceManagement/claimsCaseManagement/details",
      component: () => import("@/views/InsuranceManagement/claimsCaseManagement/details"),
      meta: {
        breadcrumb: '理赔案件详情'
      },
    },
  ]
},
]
})

首页菜单导航栏(这里的菜单是通过后台数据渲染得到)

<el-container>
    <el-container class="home_content">
      <!-- 左边菜单部分 -->
      <el-aside :width="asideWidth">
        <div class="logo">
          <img src="../assets/logo_xwhb.png" alt="">
        </div>
        <el-menu router :default-active="defaultPath" el-menu-vertical-demo :collapse="isCollapse">
          <el-submenu :index="item.id" v-for="item in menuArr" :key="item.index">
            <template slot="title"><i class=" el-icon-s-order"></i><span
                class="menu_title">{{ item.label }}</span></template>
            <el-menu-item v-for="subItem in item.children" :key="subItem.index" :index="subItem.path"
              @click="pushPath(subItem.path, subItem.label)">{{ subItem.label }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 内容区 -->
      <el-main>
        <el-header>
          <div class="head_content">
            <div class="head_content_left">
              <transition name="el-zoom-in-center">
              </transition>
              <el-link :underline="false">
                <img src="@/assets/home/img_combine.png" class="collapse_btn" @click="asideShow" />
              </el-link>
              <div style="margin-left: 20px;">
              	  <!-- 面包屑导航 封装引入 -->
                <menuarr></menuarr>
              </div>
            </div>
            <div class="head_content_right">
              <el-link :underline="false">
                <span class="header_user">
                  <i class="el-icon-user"></i>{{ this.username }}
                </span>
              </el-link>
              <el-link :underline="false">
                <span @click="logout" class="header_out">
                  <i class="icon iconfont icon-ziyuan46"></i>
                  退出
                </span>
              </el-link>
            </div>
          </div>
        </el-header>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

封装引入代码

<template>
  <div class="breadcrumb">
    <div class="breadcrumb-item">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="item in list" :key="item.path + item.name">
            <!-- <router-link :to="item.path"></router-link> -->
            {{item.meta.breadcrumb}}
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pathList: [],
        otherFlag: false,
        path: '',
      }
    },
    computed: {
      // this.checkPathList(this.$route.path, this.$route.name)
      list() {
        return this.$route.matched
      }
    },
    methods: {



    },

  }
</script>

<style scoped lang='scss'>
  .tags-box {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    background: #fff;
  }

  .tags {
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    height: 23px;
    border: 1px solid #e9eaec;
    background: #fff;
    padding: 0px 10px;
    margin-left: 7px;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
    display: flex;
    align-items: center;
    position: relative;

    i {
      margin-left: 5px;
      margin-top: 1px;
    }

    ul {
      position: absolute;
      background: #fafafa;
      width: 90%;
      height: 40px;
      left: 0;
      top: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-radius: 5px;
      box-shadow: 0px 0px 5px #ddd;
    }

    li {
      list-style: none;
      color: #666;
      text-align: center;
      height: 20px;
      line-height: 20px;
      padding: 5px 0;

      &:hover {
        background: #eee;
      }
    }

    .tags:not(.active):hover {
      background: #f8f8f8;
    }

    .active {
      color: #fff;
      background: #409EFF;
    }
  }

  /deep/.el-breadcrumb__inner{
    color: #171823;
    font-weight: bold;
  }

</style>