Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
67aa5e19 by 任超
Options

toubu

1 parent 6bcd82aa
Inline Side-by-side
Showing 2 changed files with 0 additions and 88 deletions
1 <!--面包屑 -->
2 <template>
3 <el-breadcrumb class="app-breadcrumb" separator=">">
4 <transition-group name="breadcrumb">
5 <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
6 <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
7 item.meta.title
8 }}</span>
9 <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
10 </el-breadcrumb-item>
11 </transition-group>
12 </el-breadcrumb>
13 </template>
14
15 <script>
16 export default {
17 data () {
18 return {
19 levelList: null
20 }
21 },
22 watch: {
23 $route (route) {
24 // if you go to the redirect page, do not update the breadcrumbs
25 if (route.path.startsWith('/redirect/')) {
26 return
27 }
28 this.getBreadcrumb()
29 }
30 },
31 created () {
32 this.getBreadcrumb()
33 },
34 methods: {
35 getBreadcrumb () {
36 // only show routes with meta.title
37 let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
38 const first = matched[0]
39
40 if (!this.isDashboard(first)) {
41 matched = [{ path: '/home', meta: { title: '首页' } }].concat(matched)
42 }
43
44 this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
45 },
46 isDashboard (route) {
47 const name = route && route.name
48 if (!name) {
49 return false
50 }
51 return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
52 },
53 pathCompile (path) {
54 // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
55 const { params } = this.$route
56 var toPath = pathToRegexp.compile(path)
57 return toPath(params)
58 },
59 handleLink (item) {
60 const { redirect, path } = item
61 if (redirect) {
62 this.$router.push(redirect)
63 return
64 }
65 this.$router.push(this.pathCompile(path))
66 }
67 }
68 }
69 </script>
70 <style lang="scss" scoped>
71 .app-breadcrumb.el-breadcrumb {
72 display: inline-block;
73 font-size: 14px;
74 line-height: 43px;
75 margin-left: 8px;
76
77 .no-redirect {
78 cursor: text;
79 }
80
81 /deep/.el-breadcrumb__separator {
82 font-weight: 500;
83 }
84 }
85 </style>
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
2 <div class="navbar"> 2 <div class="navbar">
3 <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" 3 <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
4 @toggleClick="toggleSideBar" /> 4 @toggleClick="toggleSideBar" />
5 <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
6 <div class="right-menu"> 5 <div class="right-menu">
7 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand"> 6 <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" @command="handleCommand">
8 <div class="avatar-wrapper"> 7 <div class="avatar-wrapper">
...@@ -19,11 +18,9 @@ ...@@ -19,11 +18,9 @@
19 </template> 18 </template>
20 <script> 19 <script>
21 import { mapGetters } from 'vuex' 20 import { mapGetters } from 'vuex'
22 import Breadcrumb from '@/components/Breadcrumb'
23 import Hamburger from '@/components/Hamburger' 21 import Hamburger from '@/components/Hamburger'
24 export default { 22 export default {
25 components: { 23 components: {
26 Breadcrumb,
27 Hamburger 24 Hamburger
28 }, 25 },
29 computed: { 26 computed: {
......