vue使用elementUI组件做面包屑

关于elementUI的相关使用代码和解释请看element UI官网

效果如图：

1. 先在router文件夹里的index.js下引入组件
采用子路由的方式引入子路由组件

    {
    
    
      path: '/',
      name: '后台管理系统',
      component: HelloWorld,
      children: [{
    
    
          path: '/',
          name: '首页',
          component: Index

        },
        {
    
    
          path: '/1',
          name: '个人管理',
          component: Component1,

        },
        {
    
    
          path: '/2',
          name: '用户管理',
          component: Component2,
        },
        {
    
    
          name: '内容管理',
          path: ':id', //无值
          component: Component3,
          children: [{
    
    
              path: '/3-1',
              name: '课程信息',
              component: Component3_1,
            },
            {
    
    
              path: '/3-2',
              name: '课程学习',
              component: Component3_2,
            },
            {
    
    
              path: ':id',
              name: '资源管理',
              component: Component3_3,
              children:[
                {
    
    
                  path: '/3-3-1',
                  name: '导学资源',
                  component: Component3_3_1,
                },
                {
    
    
                  path: '/3-3-2',
                  name: '学习资源',
                  component: Component3_3_2,
                },
                {
    
    
                  path: '/3-3-3',
                  name: '复习资源',
                  component: Component3_3_3,
                },
                {
    
    
                  path: '/3-3-4',
                  name: '课程FAQ',
                  component: Component3_3_4,
                },
              ]
            },
            {
    
    
              name: '作业管理',
              path: ':id',
              component: Component3_4,
              children:[
                {
    
    
                  path: '/3-4-1',
                  name: '自我测试',
                  component: Component3_4_1,                  
                },
                {
    
    
                  path: '/3-4-2',
                  name: '模拟试卷',
                  component: Component3_4_2,                  
                },
              ]
            },
          ]
        },
        {
    
    
          path: '/4',
          name: '系统管理',
          component: Component4,

        },
      ],
    },

另外，父页面的内容部分要加上路由
如图

2.创建面包屑组件

// BreadCrumb.vue
<template>
    <div class="navbar clearfix">
        <el-breadcrumb class="breadcrumb-container" separator="/">
            <el-breadcrumb-item v-for="item in levelList" :key="item.path">
            {
    
    {
    
    item.name}}
          </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
    export default {
    
    
        name: 'Navbar',
        data() {
    
    
            return {
    
    
                levelList: []
            }
        },
        watch: {
    
    
            $route() {
    
    
                this.getBreadcrumb()  //监听路由变化
            }
        },
        created(){
    
    
            this.getBreadcrumb()
        },
        methods:{
    
    
            getBreadcrumb() {
    
    
                let matched = this.$route.matched.filter(item => item.name)  //获取路由信息，并过滤保留路由名称信息存入数组
                this.levelList = matched
                // console.log(matched)
            }
        }
    }
</script>

3. 要使用面包屑的页面加入面包屑组件并使用

4.在导航菜单栏上绑定动态路由

        <el-col :span="5" id="side-menu">
          <el-menu router default-active="this.$route.path" class="el-menu-vertical-demo">
            <el-menu-item index="/">
              <span slot="title">
                <i class="el-icon-s-home bar-icon"></i>首页
              </span>
            </el-menu-item>
            <el-menu-item index="1">
              <span slot="title">
                <i class="el-icon-edit-outline bar-icon"></i>个人管理
              </span>
            </el-menu-item>
            <el-menu-item index="2">
              <span slot="title">
                <i class="el-icon-user-solid bar-icon"></i>用户管理
              </span>
            </el-menu-item>
            <el-submenu index="3">
              <template slot="title">
                <span>
                  <i class="el-icon-suitcase bar-icon"></i>内容管理
                </span>
              </template>
              <el-menu-item-group unique-opened="true">
                <el-menu-item index="3-1">课程信息</el-menu-item>
                <el-menu-item index="3-2">课程学习</el-menu-item>
                <el-submenu index="3-3">
                  <template slot="title">
                    <span>资源管理</span>
                  </template>
                  <el-menu-item index="3-3-1">导学资源</el-menu-item>
                  <el-menu-item index="3-3-2">复习资源</el-menu-item>
                  <el-menu-item index="3-3-3">作业管理</el-menu-item>
                  <el-menu-item index="3-3-4">课程FAQ</el-menu-item>
                </el-submenu>
                <el-submenu index="3-4">
                  <template slot="title">
                    <span>作业管理</span>
                  </template>
                  <el-menu-item index="3-4-1">自我测试</el-menu-item>
                  <el-menu-item index="3-4-2">模拟试卷</el-menu-item>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="4">
              <span slot="title">
                <i class="el-icon-setting bar-icon"></i>系统管理
              </span>
            </el-menu-item>
          </el-menu>
        </el-col>