Vue+Elementui最简单、最完整的面包屑写法
1.创建一个面包屑组件
1.1.利用路由对象 matched 属性实现
matched:返回一个数组,包含当前路由的所有嵌套路径片段的路由记录 。
路由配置:
{path:'/welcom',name:'Welcom',component:()=>import('../src/views/admin/Welcom.vue'),meta:{title:'欢迎页',name1:'后台首页'}},
{path:'users',name:'UsersIndex',component:()=>import('../src/views/users/UsersIndex.vue'),meta:{title:'用户列表',name1:'用户管理'}},
{path:'users/create',name:'UserCreate',component:()=>import('../src/views/users/UserCreate.vue'),meta:{title:'用户创建',name1:'用户管理'}},
给路由添加了meta属性,这是关键
1.2在src目录或者components里新建一个Breadcrumb.vue文件(我这里是components下创建的),文件如下:
<template>
<div class="myTitle">
<div class="img">
<!-- <img src="../../assets/LOOG.png" alt=""> -->
<!-- LOOG -->
<div class="breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/welcom' }">首页</el-breadcrumb-item>
//除首页外的以及目录
<el-breadcrumb-item :to="{path: breadList.path}">
{{breadList.meta.name1}}
</el-breadcrumb-item>
//二级目录
<el-breadcrumb-item :to="{path: breadList.path}">
{{breadList.meta.title}}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
breadList: [] // 路由集合
};
},
watch: {
$route () {
this.getBreadcrumb();
}
},
created(){
this.getBreadcrumb();
},
methods: {
getBreadcrumb(){
console.log(this.$route.matched[1],'this.$route.matched;');
this.breadList = this.$route.matched[1]
}
}
}
</script>
<style lang="scss" scoped>
.myTitle {
width: 100%;
height: 50px;
display: flex;
align-items: center;
border-bottom: 1px solid #e0e0e0;
.img {
// margin-left: 110px;
}
.breadcrumb {
display: flex;
}
}
</style>
2.将组件导入主页文件
2.1引入组件
//引入面包屑组件
import BreadCrumb from "../../components/Breadcrumb.vue";
2.2 组件传值
components: {
BreadCrumb,
},
3.使用面包屑
<!-- 面包屑部分 -->
<div class="breadCrumb">
<bread-crumb></bread-crumb>
</div>