vue + element-UI 实现面包屑

1. 路由文件中配置

 // router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const Login = () => (import('@/components/Login'))
const Home = () => (import('@/components/Home/index'))

const router = new Router({
  routes: [
    {
      path: "/",
      name: "首页",
      redirect: '/home'
    },
{
      path: '/home',
      component: Home,
      meta: { requiresAuth: true },
      children: [
        {
          path: '/',
          redirect: './overview'
        },
        { path: '/home/overview', name: "系统总览", component: Overview, meta: { title: '系统总览' } },  // 配置meta
        { path: '/home/nodeTree/tree', name: "菜单管理", component: nodeTree, meta: { title: '菜单管理' } },  // 配置meta
        { path: '/home/water/all', name: "水厂监测", component: WaterallPage, meta: { title: '水厂监测' } }  // 配置meta
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    { path: '*', component: NotFoundComponent }
  ],
  linkActiveClass: "active-router",
  linkExactActiveClass: "exact-router"
})
export default router

2. 组件内容

<template>
      <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item)  in levelList" :key="item.path" v-if="item.meta.title">
            <router-link :to="item.redirect||item.path">{{item.meta.title}}</router-link>
          </el-breadcrumb-item>
      </el-breadcrumb>
</template>

<script>
export default {
  data() {
      return {
          levelList: null
      }
  },
  methods: {
          /**
           * 生成面包屑的方法
           */
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)
      const first = matched[0]
      if (first && first.name !== '首页') {
        matched = [{path: '/home', meta: { title: '首页' }}].concat(matched)
      }
      this.levelList = matched;
    }
  },
  mounted() {
    this.getBreadcrumb();
  },
  watch: {
    $route(to, from) {
      this.getBreadcrumb();
    }
  }
}
</script>