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 },
};

欢迎大家评论，如有帮助可以关注+收藏，我会经常更新博客，大家一起讨论学习