离校前端框架,包括数据字典、工作队伍、新闻公告模块
diff --git a/leave-school-vue/src/components/Breadcrumb/index.vue b/leave-school-vue/src/components/Breadcrumb/index.vue
new file mode 100644
index 0000000..a1da13b
--- /dev/null
+++ b/leave-school-vue/src/components/Breadcrumb/index.vue
@@ -0,0 +1,51 @@
+<template>
+ <el-breadcrumb class="app-breadcrumb" separator="/">
+ <transition-group name="breadcrumb">
+ <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
+ <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
+ <router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
+ </el-breadcrumb-item>
+ </transition-group>
+ </el-breadcrumb>
+</template>
+
+<script>
+export default {
+ created() {
+ this.getBreadcrumb()
+ },
+ data() {
+ return {
+ levelList: null
+ }
+ },
+ watch: {
+ $route() {
+ this.getBreadcrumb()
+ }
+ },
+ methods: {
+ getBreadcrumb() {
+ let matched = this.$route.matched.filter(item => item.name)
+ const first = matched[0]
+ if (first && first.name !== 'Dashboard') {
+ matched = [{ path: '/dashboard', meta: { title: '离校系统' }}].concat(matched)
+ }
+ this.levelList = matched
+ }
+ }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ .app-breadcrumb.el-breadcrumb {
+ display: inline-block;
+ font-size: 14px;
+ line-height: 50px;
+ margin-left: 10px;
+ .no-redirect {
+ color: #97a8be;
+ cursor: text;
+ }
+ }
+</style>