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;

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

来源：https://blog.csdn.net/m0_64344940/article/details/122756814