vue element-ui实现动态面包屑导航

一、概述

面包屑导航是指网站或应用程序主导航之外的一种辅助性导航元素。随着单页应用（SPA）的普及，动态面包屑导航也变得越来越常见。Vue Element-UI提供了很好的组件支持，可以轻松实现动态面包屑导航的功能。

二、步骤

1. 安装Vue和Element-UI

在Vue Element-UI中使用动态面包屑导航功能，需要先安装Vue和Element-UI。可以使用npm或yarn进行安装（本示例中将使用npm）：

npm install vue
npm install element-ui

1. 创建路由

创建Vue Router路由配置文件并进行配置。在每个路由对象中，需要设置“meta”字段来存储动态面包屑导航信息。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/user',
      name: 'user',
      component: User,
      meta: {
        title: '用户管理',
        breadcrumb: true
      },
      children: [
        {
          path: 'list',
          name: 'user-list',
          component: UserList,
          meta: {
            title: '用户列表'
          }
        },
        {
          path: 'edit/:id',
          name: 'user-edit',
          component: UserEdit,
          meta: {
            title: '编辑用户'
          }
        }
      ]
    }
  ]
})

在这个示例中，/home和/user/list路由对象中都设置了“meta”信息，/user和/user/edit/:id没有设置。同时，示例中有一个nested路由/user，表示用户管理页面下还可以再进行更深层次的子路由。

1. 创建组件

在创建Vue组件时，可以使用$route对象来获取当前页面的信息。这个信息可以是路由参数，也可以是meta信息。

示例代码：

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.name" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data () {
    return {
      breadcrumbList: []
    }
  },
  mounted () {
    this.getBreadcrumb()
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  },
  methods: {
    getBreadcrumb () {
      const matched = this.$route.matched.filter(item => item.meta.breadcrumb)

      if (matched.length === 0) {
        this.breadcrumbList = []
      } else {
        this.breadcrumbList = matched.map(item => {
          return {
            name: item.name,
            path: item.path,
            title: item.meta.title
          }
        })
      }
    }
  }
}
</script>

在这个示例中，我们新建了一个动态面包屑导航组件，并通过$watch监听$route变化。在组件mounted生命周期中，调用了getBreadcrumb方法。

getBreadcrumb方法是核心方法，它首先通过this.$route.matched获取匹配的路由对象数组，然后过滤掉没有设置breadcrumb的路由对象。如果没有匹配到任何路由对象，则面包屑导航数组为空；否则，根据匹配到的路由对象数组map，并返回一个新的对象数组，对象中包括name、path以及title属性。

1. 使用组件

然后，在需要应用动态面包屑导航的页面/组件中使用Breadcrumb组件。

<template>
  <div>
    // 具体页面内容
    <breadcrumb></breadcrumb>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb.vue'

export default {
  components: {
    Breadcrumb
  }
}
</script>

备注：这里的breadcrumb标签就是在新建组件Breadcrumb时注册的组件名称。

1. 完成

至此，应用动态面包屑导航的功能已经全部完成。在通过左侧导航栏进入“用户管理”模块，即可看到动态生成的面包屑导航。

三、示例

下面给出一个较为具体的示例，演示如何在ElementUI中使用动态面包屑导航。

1. 安装Vue和ElementUI

npm install vue
npm install element-ui

1. 创建路由

在router/index.js中，新建路由对象，并在每个路由对象中设置“meta”字段来存储动态面包屑导航信息。当前示例中，我们设置了3个路由对象：首页（/home）、用户管理（/user）、用户列表（/user/list）。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import User from '@/components/User.vue'
import UserList from '@/components/UserList.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/user',
      name: 'user',
      redirect: '/user/list',
      component: User,
      meta: {
        title: '用户管理',
        breadcrumb: true
      },
      children: [
        {
          path: 'list',
          name: 'user-list',
          component: UserList,
          meta: {
            title: '用户列表'
          }
        }
      ]
    }
  ]
})

1. 创建组件

在src/components/Breadcrumb.vue中，新建组件Breadcrumb，并通过$route对象获取当前页面的信息，从而动态生成面包屑导航。

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.name" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data () {
    return {
      breadcrumbList: []
    }
  },
  mounted () {
    this.getBreadcrumb()
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  },
  methods: {
    getBreadcrumb () {
      const matched = this.$route.matched.filter(item => item.meta.breadcrumb)

      if (matched.length === 0) {
        this.breadcrumbList = []
      } else {
        this.breadcrumbList = matched.map(item => {
          return {
            name: item.name,
            path: item.path,
            title: item.meta.title
          }
        })
      }
    }
  }
}
</script>

1. 使用组件

在src/components/UserList.vue中，应用面包屑导航组件，并通过向其中传递一个固定的列表项，演示动态生成面包屑导航的效果。

<template>
  <div>
    <b-crumb :items="list"></b-crumb>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb.vue'

export default {
  components: {
    Breadcrumb
  },
  data () {
    return {
      list: [
        { path: '/', name: '首页' },
        { path: '/user', name: '用户管理' },
        { path: '/user/list', name: '用户列表' }
      ],
      tableData: [{
        name: '张三',
        gender: '男',
        age: 28
      }, {
        name: '李四',
        gender: '女',
        age: 30
      }]
    }
  }
}
</script>

<style scoped>
.el-breadcrumb {
  margin-bottom: 10px;
}
</style>

到这里，动态面包屑导航已经实现了。

四、总结

Vue Element-UI提供了很好的组件支持，可以轻松实现动态面包屑导航的功能。通过跟随路由配置文件中的meta信息，结合组件的生命周期方法及$route对象的动态属性变化，可以简单实现动态生成面包屑导航的效果。最后，由于动态面包屑导航需要根据路由实现，维护路由的完整性及一致性是关键，需要在路由开发中做好规划和设计。