vue+elementUI实现动态面包屑
作者:写Bug的大雄 发布时间:2024-05-02 17:11:02
标签: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


猜你喜欢
- 使用python实现文件导入,具体方法如下:文件样例可以自己random这里的temp1根据每一行的分隔符来读入,‘\n'表述回车t
- Dmitry这篇设计评论表单很有启发意义,尤其提到关键的评论内容、评论者信息录入顺序问题。好比我们在日常沟通时,对信息的反馈都是第一诉求,写
- 直接转换就行了,key为DataFrame的column;import pandas as pddata = pd.read_csv(
- 递归函数两大特点:1.能够调用函数自身2.至少有一个出口(结束函数自身调用)函数实现:def calnum(num): if n
- var arr=['a','b','c'];若要删除其中的'b',有两种方法
- 本文为大家分享了python操作excel的包,供大家参考,具体内容如下现在支持python操作excel的包有下列这些官网上最推荐的是op
- 通过学习借鉴朋友的实现方法进行整理,实现了PHP版的微信公共平台消息主动推送,分享给大家供大家参考,具体内容如下此方法是通过模拟登录微信公共
- 记录下Django关于日期的配置,以及如何根据日期滚动切割日志的问题。配置的源码在githun上 https://github.com/bl
- 先给大家说下什么是localstorage前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面
- 代码检测textarea内填写的长度,未填写时提示需要重新填写,少于15字符时提示需要长于15字符,成功时显示所填写建议。<scrip
- 本文实例讲述了js判断手机和pc端选择不同执行事件的方法。分享给大家供大家参考。具体如下:判断是否为手机:function isMobile
- 在MySQL数据库中导出整个数据库:1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
- 10线程同时操作,频繁出现插入同样数据的问题。虽然在插入数据的时候使用了: insert inti tablename(fields....
- 前言不知各位朋友现在在 web 端进行登录的时候有没有注意一个变化,以前登录的时候是直接账号密码通过就可以直接登录,再后来图形验证码,数字结
- 本文实例讲述了Python简单计算数组元素平均值的方法。分享给大家供大家参考,具体如下:Python 环境:Python 2.7.12 x6
- 转换为字符串类型tips['sex_str'] = tips['sex'].astype(str)转换为数值
- 前言之前说了怎么写机器码到内存,然后调用。现在说说怎么优化。用Python发送微信消息给好友第二次优化再看一遍c语言的代码void Send
- 一、前情提要相信来看这篇深造爬虫文章的同学,大部分已经对爬虫有不错的了解了,也在之前已经写过不少爬虫了,但我猜爬取的数据量都较小,因此没有过
- 如下所示:# -*- coding: utf-8 -*-# @Time : 2018/5/17 15:05# @Author :
- 记录遇到的问题;在aliyun上安装MySQL时由于上次错误卸载mysql 导致校验文件出问题;处理方式有几种1到mysql官网下载校验文件