| | |
| | | <el-breadcrumb class="app-breadcrumb" separator="/">
|
| | | <transition-group name="breadcrumb">
|
| | | <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
| | | <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
|
| | | <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
|
| | | item.meta.title }}</span>
|
| | | <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
| | | </el-breadcrumb-item>
|
| | | </transition-group>
|
| | |
| | | if (index !== 0) item = item.slice(1)
|
| | | return item
|
| | | })
|
| | | getMatched(pathList, permissionStore.sidebarRouters, matched)
|
| | | getMatched(pathList, permissionStore.defaultRoutes, matched)
|
| | | } else {
|
| | | matched = route.matched.filter((item) => item.meta && item.meta.title)
|
| | | }
|
| | |
| | | return num
|
| | | }
|
| | | function getMatched(pathList, routeList, matched) {
|
| | | let data = routeList.find((item) => item.path == pathList[0])
|
| | | matched.push(data)
|
| | | if (data.children && pathList.length) {
|
| | | pathList.shift()
|
| | | getMatched(pathList, data.children, matched)
|
| | | let data = routeList.find(item => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0])
|
| | | if (data) {
|
| | | matched.push(data)
|
| | | if (data.children && pathList.length) {
|
| | | pathList.shift()
|
| | | getMatched(pathList, data.children, matched)
|
| | | }
|
| | | }
|
| | | }
|
| | | function isDashboard(route) {
|
| | |
| | | </script>
|
| | |
|
| | | <style lang='scss' scoped>
|
| | | .app-breadcrumb.el-breadcrumb {
|
| | | display: inline-block;
|
| | | font-size: 14px;
|
| | | line-height: 50px;
|
| | | margin-left: 8px;
|
| | |
|
| | | .no-redirect {
|
| | | color: #97a8be;
|
| | | cursor: text;
|
| | | }
|
| | | }
|
| | | </style> |
| | | .app-breadcrumb.el-breadcrumb { |
| | | display: inline-block; |
| | | font-size: 14px; |
| | | line-height: 56px; |
| | | margin-left: 8px; |
| | | |
| | | :deep(.el-breadcrumb__inner) { |
| | | color: var(--text-secondary); |
| | | font-weight: 500; |
| | | transition: color 0.2s ease; |
| | | } |
| | | |
| | | :deep(.el-breadcrumb__separator) { |
| | | color: var(--text-tertiary); |
| | | } |
| | | |
| | | a { |
| | | color: var(--text-secondary); |
| | | |
| | | &:hover { |
| | | color: var(--current-color); |
| | | } |
| | | } |
| | | |
| | | .no-redirect { |
| | | color: var(--current-color); |
| | | font-weight: 600; |
| | | cursor: text; |
| | | } |
| | | } |
| | | </style> |