vue+elementUI实现动态面包屑

本文实例为大家分享了vue+elementUI实现动态面包屑的具体代码，供大家参考，具体内容如下

引言

后台管理系统中，经常会出现需要面包屑的情况，但是又不想每个页面都实现一个，这样不方便维护，因此封装了面包屑组件，方便在页面使用

封装组件

<!-- Breadcrumb/index.vue -->    
<template>
  <div>
    <el-breadcrumb class="breadcrumb" separator="/">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.path">
          <span
            v-if="
              item.redirect === $route.path || index == breadList.length - 1
            "
          >
            {{ item.meta.title }}
          </span>
          <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data () {
    return {
      // 路由集合
      breadList: [] as any[]
    };
  },
  methods: {
    // 判断是否包含首页路由
    isDashboard (route: { name: string }) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return route.name === 'Dashboard';
    },
    // 面包屑跳转
    handleLink (item: { redirect: any; path: any }) {
      const { redirect, path } = item;
      redirect ? this.$router.push(redirect) : this.$router.push(path);
    },
    // 判断当前面包屑
    init () {
      this.breadList = [];
      this.$route.matched.forEach((item) => {
        if (item.meta.title) {
          this.breadList.push(item);
        }
      });

      if (!this.isDashboard(this.breadList[0])) {
        this.breadList.unshift({
          path: '/dashboard/index',
          meta: { title: '首页' }
        });
      }
    }
  },
  created () {
    this.init();
  },
  // 当组件放在总布局组件中，需要监听路由变化
  watch: {
    $route () {
      this.init();
    }
  }
});
</script>

<style lang="less" scoped>
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all 0.5s;
}

.breadcrumb-leave-active {
  position: absolute;
}
</style>

页面使用

<template>
  <div>
    <my-breadcrumb></my-breadcrumb>
    four
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import MyBreadcrumb from '@/components/Breadcrumb/index.vue';

export default Vue.extend({
  components: {
    MyBreadcrumb
  }
});
</script>

<style scoped>
</style>

路由文件参考

// router/index.ts

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/views/login/index.vue';
import Layout from '@/layout/index.vue';

Vue.use(VueRouter);

/**
 * hidden 表示是否需要在侧边导航栏出现 ，true表示不需要
 * isFirst 表示是否只有一级权限，只出现在只有一个子集，没有其他孙子集
 * 当权限拥有多个子集或者孙子集，一级权限需要加上 meta
 * 二级权限拥有子集，也必须有 meta
 */

// 基础路由
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index.vue')
      }
    ]
  },
  {
    path: '/',
    redirect: '/dashboard',
    hidden: true
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    hidden: true
  },
  {
    path: '/dashboard',
    component: Layout,
    redirect: '/dashboard/index',
    isFirst: true,
    children: [
      {
        path: 'index',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        meta: {
          title: '首页',
          icon: 'el-icon-location'
        }
      }
    ]
  }
];

// 动态路由
export const asyncRoutes = [
  {
    path: '/form',
    component: Layout,
    redirect: '/form/index',
    isFirst: true,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index.vue'),
        meta: {
          title: '表单',
          role: 'form',
          icon: 'el-icon-location'
        }
      }
    ]
  },
  {
    path: '/editor',
    component: Layout,
    redirect: '/editor/index',
    meta: {
      role: 'editors',
      title: '总富文本',
      icon: 'el-icon-location'
    },
    children: [
      {
        path: 'index',
        name: 'Editor',
        component: () => import('@/views/editor/index.vue'),
        meta: {
          title: '富文本',
          role: 'editor',
          icon: 'el-icon-location'
        }
      },
      {
        path: 'two',
        name: 'Two',
        redirect: '/editor/two/three',
        component: () => import('@/views/editor/two.vue'),
        meta: {
          title: '二级导航',
          role: 'two',
          icon: 'el-icon-location'
        },
        children: [
          {
            path: 'three',
            name: 'Three',
            component: () => import('@/views/editor/three.vue'),
            meta: {
              title: '三级导航',
              role: 'three',
              icon: 'el-icon-location'
            }
          },
          {
            path: 'four',
            name: 'Four',
            component: () => import('@/views/editor/four.vue'),
            meta: {
              title: '三级导航2',
              role: 'four',
              icon: 'el-icon-location'
            }
          }
        ]
      }
    ]
  },
  {
    path: '/tree',
    component: Layout,
    redirect: '/tree/index',
    isFirst: true,
    children: [
      {
        path: 'index',
        name: 'Tree',
        component: () => import('@/views/tree/index.vue'),
        meta: {
          title: '树状图',
          role: 'tree',
          icon: 'el-icon-location'
        }
      }
    ]
  },
  {
    path: '/excel',
    component: Layout,
    redirect: '/excel/index',
    isFirst: true,
    children: [
      {
        path: 'index',
        name: 'Excel',
        component: () => import('@/views/excel/index.vue'),
        meta: {
          title: '导入导出',
          role: 'excel',
          icon: 'el-icon-location'
        }
      }
    ]
  }
];

// 出错跳转的路由
export const error = [
  // 404
  {
    path: '/404',
    component: () => import('@/views/error/index.vue'),
    hidden: true
  },
  {
    path: '*',
    redirect: '/404',
    hidden: true
  }
];

const createRouter = () =>
  new VueRouter({
    scrollBehavior: () => ({
      x: 0,
      y: 0
    }),
    routes: constantRoutes
  });

const router = createRouter();

// 刷新路由
export function resetRouter () {
  const newRouter = createRouter();
  (router as any).matcher = (newRouter as any).matcher;
}

export default router;

参考网上资料进行封装修改，具体需求可根据项目修改

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。