Vue elementUI中的Breadcrumb面包屑
目录一、前言二、组件使用一、前言面包屑用于显示当前页面的路径,快速返回之前的任意页面。例如:二、组件使用elementUI官网的实例十分简单,并没有配合路由来创建面包屑。但是文档中发现Breadcrumb Item的属性中是有"to"属性的,所以可以通过给"to"属性赋值,来实现同ruter-link一样的效果,即点击单个面包屑项来实现路由跳转。文件目录:路由配置:{path: '/bread-c
一、前言
面包屑用于显示当前页面的路径,快速返回之前的任意页面。
例如:
二、组件使用
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属性为其元数据对象。
更多推荐
所有评论(0)