vue+elementUI实现动态面包屑
这篇文章主要为大家详细介绍了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;
参考网上资料进行封装修改，具体需求可根据项目修改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- vue+elementUI动态生成面包屑导航教程
- vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
- Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)
- Vue+ElementUI实现从后台动态填充下拉框的示例代码
- vue+elementui实现动态控制表格列的显示和隐藏
- vue+elementui实现动态添加行/可编辑的table
- 如何解决element-ui动态加载级联选择器默认选中问题