Vue封装一个全自动的面包屑

在vue后台管理项目中经常用到面包屑,我们这里封装一个全自动的面包屑.用的唯一知识就是this.$route.matched:获取路由记录的.

效果图

• 路由篇

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import User from "../views/User.vue"
import UserDetail from "../views/UserDetail.vue"
import UserEdit from "../views/UserEdit.vue"
Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta:{
      title:"首页"
    },
    children: [
      {
        path: "user",
        component: User,
        name: "home-user",
        meta: { title: "用户中心" },
        children: [
          {
            path: "detail",
            component: UserDetail,
            name: "user-detail",
            meta: { title: "用户详情" }
          },
          {
            path: "edit",
            component: UserEdit,
            name: "user-edit",
            meta: { title: "编辑用户" }
          }
        ]
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

• 面包屑封装篇

<template>
  <div class="bread-card">
    <el-breadcrumb class="app-breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in leaveList" :key="item.path">
          <span
            @click.prevent="handleLink(item, index)"
            style="cursor: pointer"
            >{{ item.meta.title }}</span
          >
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leaveList: [],
    };
  },
  watch: {
    $route: {
      handler() {
        this.getBreadcrumb();
      },
      immediate: true,
    },
  },
  methods: {
    getBreadcrumb() {
      this.leaveList = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );
    },
    handleLink(item, index) {
     //处于本页就不再跳转
      if (index === this.leaveList.length - 1) {
        return;
      }
      this.$router.push({ path: `${item.path}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.bread-card {
  height: 50px;
  display: flex;
  align-items: center;
  margin-left: 10px;
  font-weight: bold;
}
</style>

• 使用篇

作为组件导入
<div class="content">
      <CustomBreadcrumb />
      <router-view />
    </div>

上面的有一个bug,存在动态参数的时候,参数会丢失,这时候需要用到path-to-regexp库

安装  npm I path-to-regexp -S

在项目中具体使用

 handleLink(item, index) {
      const { path } = item
      //处于本页就不再跳转
      if (index === this.leaveList.length - 1) {
        return;
      }
      path && this.$router.push(this.pathCompile(path))
    },
    // 解决动态路由参数丢失的问题
    pathCompile(path) {
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },