1. 在路由表中按需添加多层嵌套关系 使用children进行添加嵌套路由 meta添加元数据
1. 1组件自行创建
import Layout from '@/layout'
{
path: '/data',
component: Layout,
redirect: '/data/one',
meta: { title: '数据管理', icon: 'el-icon-s-tools' },
children: [
{
path: 'one',
name: 'data_one',
component: () => import('@/views/Data/one.vue'),
// 元数据
meta: { title: "数据管理1-1" },
},
{
path: 'two',
name: 'data_one',
redirect: '/data/one/one', // 如果需要点击路由不是空白页(加上redirect)
component: () => import('@/views/Data/two.vue'),
// 元数据
meta: { title: "数据管理1-2" },
children: [{
path: 'one',
name: 'data_one_one',
component: () => import('@/views/Data/One/one.vue'),
// 元数据
meta: {title: "数据管理1-2-1"}
},
{
path: 'two',
name: 'data_one_two',
component: () => import('@/views/Data/One/two.vue'),
// 元数据
meta: {title: "数据管理1-2-2"}
}]
}]
},
2. 面包屑组件中代码
<template>
<div class="example-container">
<el-breadcrumb separator="/">
<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;
//如果不是首页
if (!this.isHome(matched[0])) {
matched = matched.filter(item=>{
if(item.meta.title !== undefined){
return item
}
})
matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
}
this.breadList = matched
}
},
created() {
this.getBreadcrumb();
}
};
</script>
<style lang="scss" scoped></style>
3. 注册全局组件
import Mybread from '../layout/components/Bradcrumb/index.vue'
// 全局组件
export default {
install(Vue) {
Vue.component('my-bread', Mybread)
}
}
4. 入口文件main.js引入
import Component from './utils/Component.js'
Vue.use(Component)
5. 页面中使用
<template>
<section class="app-main">
<!-- 首页就不需要面包屑 -->
<my-bread v-if="key != '/home'"></my-bread>
<transition name="fade-transform" mode="out-in">
<router-view :key="key" />
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key() {
return this.$route.path
}
}
}
</script>
<style scoped>
.app-main {
/*50 = navbar */
height: 100%;
width: 100%;
position: relative;
overflow: auto;
}
.fixed-header+.app-main {
padding-top: 50px;
}
</style>
<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
padding-right: 15px;
}
}
</style>