1.使用elementui 中面包屑组件
2.在router文件夹下index.js中配置路由
const routes = [
{
path:'/',
redirect:'/login'
},
{
path:'/login',
component:()=>import('@/components/Login.vue')
},
{
path: '/home',
name: 'Home',
redirect:'/news',
meta: { title: "首页" }//面包屑导航显示的文字
component: Home,
children:[
{
path:'/news',
name:'News',
component:() =>import('@/views/News/News.vue'),
meta: { title: "新闻" }
},
{
path:'/notice',
name:'Notice',
component:() =>import('@/views/Notice/Notice.vue'),
meta: { title: "公告" }
}
]
},
3.新建面包屑组件文件 Breadcrumb.vue(可直接复制引用)
<template>
<div class="breadcrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
data() {
return {
breadList: [] // 路由集合
};
},
watch: {
$route() {
this.getBreadcrumb();
}
},
methods: {
isHome(route) {
return route.name === "home";
},
getBreadcrumb() {
let matched = this.$route.matched;
// console.log(matched)
//如果不是首页
// if (!this.isHome(matched[0])) {
// matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
// }
this.breadList = matched;
}
},
created() {
this.getBreadcrumb();
}
}
</script>
4.在文件中引入面包屑组件
//html
<template>
<div>
<bread-crumb></bread-crumb>
</div>
</template>
<script>
//引入面包屑组件
import BreadCrumb from "./BreadCrumb.vue";
export default {
data() {
return {
};
},
components: {
BreadCrumb,
},
};
</script>