Vue2.x+elementUI实现面包屑导航分析

一、功能分析

	 面包屑功能实现
    1.路由模块化整理成一二级路由
    2.每级路由配置路由源信息
    3.在面包屑组件获取路由源信息中的meta数据，在matched中可以获取到各级meta信息
    4.过滤matched中的meta，过滤掉空的meta
    5.循环出我们需要的数据格式
    6.过滤好的数据格式赋值给data里面的bread
    7.监听路由，路由改变就重新给bread赋值
    8.面包屑导航的动态选中样式给当前路径的index

router.js代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location){
  return originalPush.call(this,location).catch(err=> err)
}

const routes = [
  // 登录页面
  {
    path: '/login',
    name: 'login',
    component: ()=>import('@/views/login/Login.vue')
  },
  // 注册页面
  {
    path: '/register',
    name: 'register',
    component: ()=>import('@/views/register/Register')
  },
  // 后台首页
  {
    path:'/managehome',
    name: 'managehome',
    meta:{
      title:'首页'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      // 首页
      {
        path:'',
        name:'managehomehome',
        component:()=>import('@/views/managehome/main/homeAside/SysHome.vue')
      }
    ]
  },

  // 内容管理
  {
    path:'/contentmanage',
    name: 'contentmanage',
    redirect:'/contentmanage/sysblog',
    meta:{
      title:'内容管理'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      // 博客文章
      {
        path:'/contentmanage/sysblog',
        name:'sysblog',
        meta:{
          title:'博客文章'
        },
        component:()=>import('@/views/managehome/main/contentAside/SysBlog.vue')
      },
      // 文章分类
      {
        path:'/contentmanage/syscategory',
        name:'syscategory',
        meta:{
          title:'文章分类'
        },
        component:()=>import('@/views/managehome/main/contentAside/SysCategory.vue')
      },
      // 发布文章
      {
        path:'/contentmanage/syspublicblog',
        name:'syspublicblog',
        meta:{
          title:'发布文章'
        },
        component:()=>import('@/views/managehome/main/contentAside/SysPublicBlog.vue')
      }
    ]
  },

  // 界面管理
  {
    path:'/facemanage',
    name:'facemanage',
    redirect:"/facemanage/sysswiper", 
    meta:{
      title:'界面管理'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      // 轮播图管理
      {
        path:"/facemanage/sysswiper",
        name:'sysswiper',
        meta:{
          title:'轮播图管理'
        },
        component:()=>import('@/views/managehome/main/facemanage/SysSwiper.vue')
      },
      // 广告图管理
      {
        path:"/facemanage/sysadvise",
        name:'sysadvise',
        meta:{
          title:'广告图管理'
        },
        component:()=>import('@/views/managehome/main/facemanage/SysAdvise.vue')
      }
    ]
  },

  // 用户管理
  {
    path:'/usersmanage',
    name:'usersmanage',
    meta:{
      title:'用户管理'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      {
        path:"",
        component: ()=>import('@/views/managehome/main/usermanage/SysUsers.vue')
      }
    ]
  },

  // 评论管理
  {
    path:'/discussmanage',
    name:'discussmanage',
    meta:{
      title:'评论管理'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      {
        path:"",
        component: ()=>import('@/views/managehome/main/discussmanage/SysDiscuss.vue')
      }
    ]
  },

  // 个人设置
  {
    path:'/personalset',
    name:'personalset',
    meta:{
      title:'个人设置'
    },
    component: ()=>import('@/views/managehome/Managehome'),
    children:[
      {
        path:"",
        component: ()=>import('@/views/managehome/main/personalset/SysPersonal.vue')
      }
    ]
  },
]

const router = new VueRouter({
  routes
})

export default router

BreadCrumb.vue代码：

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(bread, index) in bread"
              :key="index"
              :to="bread.path"
            >{{ bread.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "myBreadCrumb",
  data() {
    return {
      bread: [
        {
          title: "首页",
          path: "/managehome/syshome"
        }
      ]
    };
  },
  methods: {
    getBreadData() {
      const meatched = this.$route.matched;
      const filterArr = meatched.filter(item => {
        return item.meta && item.meta.title;
      });

      const newBread = filterArr.map(item => {
        return {
          title: item.meta.title,
          path: item.path
        };
      });
      this.bread = [{path:'/managehome',title:'首页'},...newBread];
    }
  },
  created() {
    // 面包屑功能实现
    // 1.路由模块化整理成一二级路由
    // 2.每级路由配置路由源信息
    // 3.在面包屑组件获取路由源信息中的meta数据，在matched中可以获取到各级meta信息
    // 4.过滤matched中的meta，过滤掉空的meta
    // 5.循环出我们需要的数据格式
    // 6.过滤好的数据格式赋值给data里面的bread
    // 7.监听路由，路由改变就重新给bread赋值
    this.getBreadData()
  },
  watch: {
    "$route.path": function() {
      this.getBreadData()
    }
  }
};
</script>
<style lang="less" scoped>
.breadcrumb {
  height: 40px;
  background-color: rgb(217, 211, 203);
  padding-left: 12px;
}
.el-breadcrumb {
  font-size: 14px;
  line-height: 3;
}
</style>

Aside.vue代码：

<template>
  <div class="aside">
    <div class="asideLogo"></div>
    <el-menu
      :default-active="active"
      class="el-menu-vertical-demo el-my-menu"
      :collapse="isCollapse"
      text-color="white"
      background-color="#233b59"
      :router="true"
    >
      <el-menu-item index="/managehome">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-notebook-2"></i>
          <span slot="title" color="white">内容管理</span>                                                                                                                   
        </template>
          <el-menu-item index="/contentmanage/sysblog">博客文章</el-menu-item>
          <el-menu-item index="/contentmanage/syscategory">文章分类</el-menu-item>
          <el-menu-item index="/contentmanage/syspublicblog">发布文章</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-monitor"></i>
          <span slot="title" color="white">界面管理</span>                                                                                                                   
        </template>
          <el-menu-item index="/facemanage/sysswiper">轮播图管理</el-menu-item>
          <el-menu-item index="/facemanage/sysadvise">广告图管理</el-menu-item>
      </el-submenu>
      <el-menu-item index="/usersmanage" >
        <i class="el-icon-user-solid"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/discussmanage" >
        <i class="el-icon-chat-square"></i>
        <span slot="title">评论管理</span>
      </el-menu-item>
      <el-menu-item index="/personalset" >
        <i class="el-icon-s-tools"></i>
        <span slot="title">个人设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "myAside",
  data() {
    return {
      
    };
  },
  methods: {
    
  },
  computed:{
    // 活动选项
    active(){
      return this.$route.path
    },
    isCollapse(){
        return this.$store.state.Tab.isCollapse
    }
  }
};
</script>
  <style lang="less" scoped>
  .aside{
    height: 100vh;
    overflow: auto;
    background: #233b59 ;
     -webkit-box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
     box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
     z-index: 2;
    .asideLogo{
        width: 100%;
        height: 80px;
        background: #233b59  url(@/assets/imgs/asideLogo.png) no-repeat center;
        background-size: contain;
    }
    .el-menu-item,.el-submenu{
        background-color: #233b59;
    }
    .el-menu{
      border-right:none;
    }
  }
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

</style>