春风项目四线(合箱线、总装线)
wujian
2024-01-24 78830ddf56a41d16ab440a1ed3019ef77b3db4af
提交 | 用户 | 时间
fd2207 1 <template>
2   <el-breadcrumb class="app-breadcrumb" separator="/">
3     <transition-group name="breadcrumb">
4       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
5         <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
6         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
7       </el-breadcrumb-item>
8     </transition-group>
9   </el-breadcrumb>
10 </template>
11
12 <script>
13 export default {
14   data() {
15     return {
16       levelList: null
17     }
18   },
19   watch: {
20     $route(route) {
21       // if you go to the redirect page, do not update the breadcrumbs
22       if (route.path.startsWith('/redirect/')) {
23         return
24       }
25       this.getBreadcrumb()
26     }
27   },
28   created() {
29     this.getBreadcrumb()
30   },
31   methods: {
32     getBreadcrumb() {
33       // only show routes with meta.title
34       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
35       const first = matched[0]
36
37       if (!this.isDashboard(first)) {
38         matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
39       }
40
41       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
42     },
43     isDashboard(route) {
44       const name = route && route.name
45       if (!name) {
46         return false
47       }
48       return name.trim() === 'Index'
49     },
50     handleLink(item) {
51       const { redirect, path } = item
52       if (redirect) {
53         this.$router.push(redirect)
54         return
55       }
56       this.$router.push(path)
57     }
58   }
59 }
60 </script>
61
62 <style lang="scss" scoped>
63 .app-breadcrumb.el-breadcrumb {
64   display: inline-block;
65   font-size: 14px;
66   line-height: 50px;
67   margin-left: 8px;
68
69   .no-redirect {
70     color: #97a8be;
71     cursor: text;
72   }
73 }
74 </style>