| <!-- |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <template> |
| <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">{{ generateTitle(item.meta.title) }}</span> |
| <router-link v-else :to="item.path">{{ generateTitle(item.meta.title) }}</router-link> |
| </el-breadcrumb-item> |
| </transition-group> |
| </el-breadcrumb> |
| </template> |
| |
| <script> |
| import { generateTitle } from '@/utils/i18n' |
| import pathToRegexp from 'path-to-regexp' |
| |
| export default { |
| data() { |
| return { |
| levelList: null |
| } |
| }, |
| watch: { |
| $route() { |
| this.getBreadcrumb() |
| } |
| }, |
| created() { |
| this.getBreadcrumb() |
| }, |
| methods: { |
| generateTitle, |
| getBreadcrumb() { |
| const { params } = this.$route |
| const matched = this.$route.matched.filter(item => { |
| if (item.name) { |
| // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 |
| var toPath = pathToRegexp.compile(item.path) |
| item.path = toPath(params) |
| return true |
| } |
| }) |
| var route = [] |
| for (var i = 0; i < matched.length; i++) { |
| var path = matched[i].path |
| if (path === '/management') { |
| route.push({ |
| 'path': matched[i].path, |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.management') |
| } |
| }) |
| } |
| var pathList = path.split('/') |
| if (pathList.indexOf('brokers') === 2) { |
| route.push({ |
| 'path': '/management/clusters', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.clusters') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': '/management/clusters/' + pathList[3] + '/cluster?tab=brokers', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.brokers') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': matched[i].path, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.brokerInfo') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| } else if (pathList.indexOf('namespaceIsolationPolicy') === 5) { |
| route.push({ |
| 'path': '/management/clusters', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.clusters') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': '/management/clusters/' + pathList[3] + '/cluster?tab=isolationPolicies', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.isolationPolicies') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': matched[i].path, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.isolationPolicyInfo') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| } else if (pathList.indexOf('failureDomainName') === 5) { |
| route.push({ |
| 'path': '/management/clusters', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.clusters') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': '/management/clusters/' + pathList[3] + '/cluster?tab=failureDomains', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.failureDomains') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': matched[i].path, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.failureDomainInfo') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| } else if (pathList.indexOf('cluster') === 4) { |
| route.push({ |
| 'path': '/management/clusters', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.clusters') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': matched[i].path, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.clusterInfo') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| } else if (pathList.indexOf('clusters') === 2) { |
| route.push({ |
| 'path': '/management/clusters', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.clusters') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| } else if (pathList.indexOf('subscriptions') === 2) { |
| route.push({ |
| 'path': '/management/tenants', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.tenants') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': '/management/tenants/tenantInfo/' + pathList[4] + '?tab=namespaces', |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.namespaces') |
| } |
| }) |
| route.push({ |
| 'path': '/management/namespaces/' + pathList[4] + '/' + pathList[5] + '/namespace' + '?tab=topics', |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.topics') |
| } |
| }) |
| route.push({ |
| 'path': '/management/topics/' + pathList[3] + '/' + pathList[4] + '/' + pathList[5] + '/' + pathList[6] + '/topic', |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.subscriptions') |
| } |
| }) |
| route.push({ |
| 'path': matched[i].path, |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.subscriptionInfo') |
| } |
| }) |
| } else if (pathList.indexOf('topics') === 2) { |
| route.push({ |
| 'path': '/management/tenants', |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.tenants') |
| }, |
| 'redirect': matched[i].redirect |
| }) |
| route.push({ |
| 'path': '/management/tenants/tenantInfo/' + pathList[4] + '?tab=namespaces', |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.namespaces') |
| } |
| }) |
| route.push({ |
| 'path': '/management/namespaces/' + pathList[4] + '/' + pathList[5] + '/namespace' + '?tab=topics', |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.topics') |
| } |
| }) |
| route.push({ |
| 'path': matched[i].path, |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.topicInfo') |
| } |
| }) |
| } else if (pathList.indexOf('namespaces') === 2) { |
| route.push({ |
| 'path': '/management/tenants', |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.tenants') |
| } |
| }) |
| route.push({ |
| 'path': '/management/tenants/tenantInfo/' + pathList[3] + '?tab=namespaces', |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.namespaces') |
| } |
| }) |
| route.push({ |
| 'path': matched[i].path, |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.namespaceInfo') |
| } |
| }) |
| } else if (pathList.indexOf('tenantInfo') === 3) { |
| route.push({ |
| 'path': '/management/tenants', |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.tenants') |
| } |
| }) |
| route.push({ |
| 'path': matched[i].path, |
| 'redirect': matched[i].redirect, |
| 'meta': { |
| 'title': this.$i18n.t('breadcrumb.tenantInfo') |
| } |
| }) |
| } |
| } |
| // if (first && first.name.trim().toLocaleLowerCase() !== 'Management'.toLocaleLowerCase()) { |
| // matched = [{ path: '/management', meta: { title: 'management' }}].concat(matched) |
| // } |
| this.levelList = route |
| } |
| } |
| } |
| </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> |
