一、前言

面包屑用于显示当前页面的路径，快速返回之前的任意页面。
例如：

二、组件使用

elementUI官网的实例十分简单，并没有配合路由来创建面包屑。

但是文档中发现Breadcrumb Item的属性中是有"to"属性的，所以可以通过给"to"属性赋值，来实现同ruter-link一样的效果，即点击单个面包屑项来实现路由跳转。

文件目录：

路由配置：

{path: '/bread-crumb',name: 'BreadCrumb',component: ()=> import('../views/breadCrumb/Breadcrumb'),meta: {title: '面包屑'},children: [{path: 'child1',component: ()=> import('../views/breadCrumb/Child1'),meta: {title: 'child1'},children: [{path: 'child1-1',component: ()=> import('../views/breadCrumb/Child1-1'),meta: {title: 'child1-1'}}]},{path: 'child2',component: ()=> import('../views/breadCrumb/Child2'),meta: {title: 'child2'}}]}

这里使用了router的meta属性，为其设置名为title的属性，用来当作面包屑的展示名称，当然，也可以直接使用路由的name属性。
Breadcrumb.vue：

<template><div class="bread-crumb"><el-breadcrumb separator="/">
<!-- 预设一个首面包屑 --><el-breadcrumb-item:to="{ path: '/' }">首页</el-breadcrumb-item>
<!--  循环遍历面包屑列表 --><el-breadcrumb-item:to="{path: item.path}"v-for="(item, index) in breadList":key="index">{{item.meta.title}}</el-breadcrumb-item></el-breadcrumb><router-view></router-view></div>
</template><script>
export default {name: "Breadcrumb",data(){return{breadList: []}},created() {this.getBreadcrumb();},watch: {$route() {this.getBreadcrumb()}},methods: {getBreadcrumb() {console.log(this.$route.matched)  //可以获取上下文路由 也就是可以获取父亲和孩子路由组成的数组if (Object.keys(this.$route.matched[0].meta).length > 0) {this.breadList = this.$route.matched} else {this.breadList = []}}},
}
</script><style scoped></style>

运行后，在地址栏输入（这里端口默认为8080）：

http://localhost:8080/#/bread-crumb/child1/child1-1

打开控制台，可以看到：
输出的this.$route.matched为包含3个元素的数组：

this.$route.matched返回一个数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

效果：
除了child1-1外，其他面包屑项都可以点击，跳转到对应的路径。

三、总结

vue-router和breadcrumb面包屑结合，实现展示当前路径下的路由信息。关键是利用route对象的matched属性，得到前匹配的路径中所包含的所有片段所对应的配置参数对象数组，然后遍历数组，并利用数组中对象的信息，展示到面包屑中。每个对象的path属性为其对应的路由路径，meta属性为其元数据对象。

Vue elementUI中的Breadcrumb面包屑相关推荐

vue + Element UI 动态Breadcrumb 面包屑的制作
文章目录效果一.路由配置二.使用步骤 1.Breadcrumb.vue: 2.在页面中使用总结效果面包屑用于显示当前页面的路径,快速返回之前的任意页面. 一.路由配置代码如下: impo ...
vue+elementui最简单的面包屑写法
Vue+Elementui最简单.最完整的面包屑写法 1.创建一个面包屑组件 2.将组件导入主页文件 3.使用面包屑 4.效果图 1.创建一个面包屑组件 1.1.利用路由对象 matched 属性实现 ...
在vue中使用element-ui二次封装面包屑导条
在vue中使用element-ui二次封装面包屑导条由于这几天写了一个后台管理系统,多次使用的到了面包屑导航,所以我就把它封装起来使用了: 效果图第一步安装element-ui npm i el ...
vue3 - 仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件 element-ui 面包屑结构 <el-breadcrumb separator="/"&g ...
改变路径但是不让它跳转_Vue实战047：Breadcrumb面包屑实现导航路径
前言在网站中我们经常看到有个导航路径,可以直观地显示当前页面的路径,并快速返回之前的任意页面.这是一个非常实用的功能,也是在Web前端必备的导航UI之一.今天我们借助el-breadcrumb来快速 ...
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
分页: 分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能.此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
vue+elementUI中使用Echarts （懒人无脑版）
vue+elementUI中使用Echarts (懒人无脑版)+(史上最强版) 前言一.Echarts 1.提供一个Echarts 网站随去随用 http://img.9cfcf.com/#tp- ...

Vue elementUI中的Breadcrumb面包屑

目录

一、前言

二、组件使用

三、总结

Vue elementUI中的Breadcrumb面包屑相关推荐

最新文章

热门文章