Vue+ElementUI封装简易面包屑组件

在实际项目中面包屑是非常常见的一个功能，用于切换层级选项
当然有的公司会使用TagsView导航栏，这个后续在做介绍
今天分享一个简易的面包屑组件，这边配合ui库进行封装

1. 安装依赖，在main.js中引入

yarn add element-ui  import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'  Vue.config.productionTip = false  Vue.use(ElementUI)  new Vue({   router,   store,   render: h => h(App) }).$mount('#app') 

2. 注册路由信息及关联components组件

const routes = [{   path: '/',   name: 'home',   component: () => import('../views/Home.vue'),   meta: { title: '首页', path: '/' },   children: [{     path: '/A-Business',     component: () => import('../views/A-Business.vue'),     meta: { title: 'A', path: '/A-Business' }   },   {     path: '/B-Extension',     component: () => import('../views/B-Extension.vue'),     meta: { title: 'B', path: '/B-Extension' }   },   {     path: '/C-Management',     component: () => import('../views/C-Management.vue'),     meta: { title: 'C', path: '/C-Management' }   }, {     path: '/D-customer',     component: () => import('../views/D-customer.vue'),     meta: { title: 'D', path: '/D-customer' }   }   ] }] 

3. 新建vue文件，myBreadcrumb.vue，内部使用el-breadcrumb

<template>   <div>     <el-breadcrumb separator="/">       <el-breadcrumb-item v-for="(item, i) in breadList" :key="i">         <a @click.prevent="handleLink(item)">           {{ item.meta.title }}         </a>       </el-breadcrumb-item>     </el-breadcrumb>   </div> </template> <script> export default {   data () {     return {       breadList: null     }   },   created () {     this.getBreadcrumb()   },   methods: {     handleLink(item) {       const { redirect, meta } = item;       if (redirect) {         this.$router.push(redirect);         return;       }       this.$router.push(meta.path);     },     getBreadcrumb () {       // 包含当前路由的所有嵌套路径片段的路由记录       const matched = this.$route.matched.filter((item) => item.meta && item.meta.title);       // 赋值循环渲染       this.breadList = matched     }   },   watch: {     $route(route) {       // 如果转到重定向页面，不要更新面包屑       if (route.path.startsWith("/redirect/")) {         return;       }       this.getBreadcrumb();     }   }, } </script> 

4. 引入myBreadcrumb.vue面包屑组件注册使用即可

<template>   <div>      <!-- <myBreadcrumb /> -->   </div> </template> import myBreadcrumb from "@/components/myBreadcrumb.vue"; export default {   name: 'xxx'   components: { myBreadcrumb }, };