76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<el-breadcrumb separator-class="el-icon-caret-right" class="app-breadcrumb">
|
||
|
|
<el-breadcrumb-item>
|
||
|
|
<router-link to="/">主控</router-link>
|
||
|
|
</el-breadcrumb-item>
|
||
|
|
<el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
|
||
|
|
<router-link :to="item.path">{{ item.title }}</router-link>
|
||
|
|
</el-breadcrumb-item>
|
||
|
|
</el-breadcrumb>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Breadcrumb',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
breadcrumb: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.refreshBreadcrumb()
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
/**
|
||
|
|
* @description: 拿路由列表 并过滤不显示项 和没有权限项
|
||
|
|
*/
|
||
|
|
routes () {
|
||
|
|
return this.$router.options.routes.filter(
|
||
|
|
item => item.hidden !== true && item.roles.indexOf(this.$store.state.user.power.trim()) >= 0
|
||
|
|
)
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* @description: 当前路径
|
||
|
|
*/
|
||
|
|
presentPath () {
|
||
|
|
return this.$route.path
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
presentPath () {
|
||
|
|
this.refreshBreadcrumb()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* @description: 刷新面包条数据
|
||
|
|
*/
|
||
|
|
refreshBreadcrumb () {
|
||
|
|
const temp = []
|
||
|
|
this.routes.forEach(element => {
|
||
|
|
element.children.forEach(child => {
|
||
|
|
if (this.presentPath.search(child.path) !== -1) {
|
||
|
|
temp[0] = { title: element.meta.title, path: element.path }
|
||
|
|
temp[1] = { title: child.meta.title, path: child.path }
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
this.breadcrumb = temp
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "@/styles/theme.scss";
|
||
|
|
|
||
|
|
.el-breadcrumb * {
|
||
|
|
font-weight: normal !important;
|
||
|
|
color: $maintext-color !important;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 50px;
|
||
|
|
cursor: text;
|
||
|
|
}
|
||
|
|
</style>
|