Vue + elementUI实现动态面包屑

最新推荐文章于 2024-08-12 18:46:12 发布

下辈子不当程序猿

最新推荐文章于 2024-08-12 18:46:12 发布

阅读量2.6k

点赞数

分类专栏：前端框架学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/Bao59/article/details/109090876

版权

前端框架学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

后台接口输出json：

{
  "success": true,
  "code": 20000,
  "message": "成功",
  "data": {
    "menus": [
      {
        "mid": "1",
        "title": "数据统计",
        "icon": "el-icon-s-data",
        "path": "/welcome/",
        "parentMid": "0",
        "createTime": "2020-10-14 10:37:46",
        "updateTime": "2020-10-14 10:37:49",
        "children": []
      },
      {
        "mid": "2",
        "title": "用户管理",
        "icon": "el-icon-s-custom",
        "path": "/user",
        "parentMid": "0",
        "createTime": "2020-10-14 10:39:31",
        "updateTime": "2020-10-14 10:39:32",
        "children": [
          {
            "mid": "21",
            "title": "用户列表",
            "icon": "el-icon-document",
            "path": "/user/",
            "parentMid": "2",
            "createTime": "2020-10-14 10:57:12",
            "updateTime": "2020-10-14 10:57:13"
          },
          {
            "mid": "22",
            "title": "用户添加",
            "icon": "el-icon-edit-outline",
            "path": "/user/save/",
            "parentMid": "2",
            "createTime": "2020-10-14 10:57:15",
            "updateTime": "2020-10-14 10:57:17"
          }
        ]
      }
    ]
  }
}

ElementUI面包屑：

<!-- 面包屑 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
	<el-breadcrumb-item :to="{ path: '/welcome'}" @click="clearRouter">首页</el-breadcrumb-item>
	<el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path">
		{{item.title}}
	</el-breadcrumb-item>
</el-breadcrumb>

computed计算属性：

computed: {
	// 动态面包屑
	breadcrumbList() {
		let breadcrumbs = []
		// 获取的菜单列表
		let menuList = this.menuList
		// 获取面包屑路由菜单对象
		this.indexBreadcrumbs.map(item => {
			for (let i = 0; i < menuList.length; i++) {
				// 如果是有二级菜单
				if (menuList[i].children !== undefined && menuList[i].children.length > 0 && item == menuList[i].path) {
					breadcrumbs.push(menuList[i])
					continue
				}
				// 如果没有二级菜单
				else if(menuList[i].children !== undefined && menuList[i].children.length == 0 && item == menuList[i].path) {
					breadcrumbs.push(menuList[i])
					break
				}
				// 如果是二级菜单
				else {
					for(let j = 0; j < menuList[i].children.length; j++) {
						if (item == menuList[i].children[j].path) {
							breadcrumbs.push(menuList[i].children[j]);
							break
						}
					}
				}
			}
		})
		return breadcrumbs
	}
}

话不多说，来看最终效果：
效果图