Element-UI组件实现面包屑导航栏的示例代码

npm install element-ui --save
# 或者
yarn add element-ui

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

export const routes = [
  {
    path: '/',
    name: 'redirect',
    component: Layout,
    hidden: true, // 隐藏菜单
    redirect: "/homePage", // 用户在地址栏输入 '/' 时会自动重定向到 /homePage 页面
  },
  {
    path: '/homePage',
    component: Layout,
    redirect: "/homePage/index",
    meta: {
      title: "首页",
      affix: true, // 固定路由,不跳转
    },
    children: [
      {
        path: 'index',
        name: 'homePageIndex',
        meta: {
          title: "首页",
        },
        component: () => import('@/views/homePage/index.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error/404.vue'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error/401.vue'),
    hidden: true
  },
  {
    path: '/admin',
    meta: {
      title: "系统管理",
      affix: true
    },
    component: Layout,
    children: [
      {
        path: 'user',
        name: 'userIndex',
        meta: {
          title: "用户管理",
        },
        component: () => import('@/views/admin/user/index.vue')
      },
      {
        path: 'role',
        name: 'roleIndex',
        meta: {
          title: "角色管理",
        },
        component: () => import('@/views/admin/role/index.vue'),
        children: [
          {
            path: 'add',
            name: 'addRole',
            hidden: true,
            meta: {
              title: "添加角色",
            },
            component: () => import('@/views/admin/user/index.vue')
          },
          {
            path: 'update',
            name: 'updateRole',
            hidden: true,
            meta: {
              title: "编辑角色",
            },
            component: () => import('@/views/admin/role/index.vue')
          }
        ]
      }
    ]
  }
]

<template>
  <div class="tags_view">
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item v-for="item in Breadcrumb" :key="item.path" :to="toPath(item)" class="title">
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'TagsView',
  data() {
    return {
      Breadcrumb: [],

    }
  },
  created() {
    this.genBreadcrumb(this.$route);
  },
  watch: {
    $route() {
      this.genBreadcrumb(this.$route);
    },
  },
  methods: {
    toPath(item) {
      console.log('path::: ', item.meta);
       // 如果路径相同，点击导航则不跳转
      if (item.path === this.$route.path) {
        return ''
      }
      // 如果是固定路由，则不跳转
      if (item.meta.affix) {
        return ''
      } else {
      	// 跳转路由
        return item.path
      }

    },
    genBreadcrumb(route) {
      // console.log('route::: ', route);
      // 获取含有title属性的路由。
      let matched = route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      this.Breadcrumb = matched;
    },
  },
}
</script>

<style lang="scss" scoped>
.tags_view {
  padding: 15px 0 0 15px;
}

.tags_view .title {
  font-size: 16px !important;

}
</style>