123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <template>
- <el-breadcrumb class="app-breadcrumb" separator="/">
- <transition-group name="breadcrumb">
- <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
- <span v-if="item.redirect === 'noredirect' || index === breadcrumbs.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>
- </el-breadcrumb>
- </template>
- <script lang="ts">
- import { compile } from "path-to-regexp";
- import { Component, Vue, Watch } from "vue-property-decorator";
- import { RouteRecord, Route } from "vue-router";
- @Component({
- name: "Breadcrumb",
- })
- export default class extends Vue {
- private breadcrumbs: RouteRecord[] = [];
- @Watch("$route")
- private onRouteChange(route: Route) {
- // if you go to the redirect page, do not update the breadcrumbs
- if (route.path.startsWith("/redirect/")) {
- return;
- }
- this.getBreadcrumb();
- }
- created() {
- this.getBreadcrumb();
- }
- private getBreadcrumb() {
- let matched = this.$route.matched.filter((item) => item.meta && item.meta.title);
- const first = matched[0];
- //针对关系模块添加面包屑
- if (first) {
- matched = this.relationModel(matched)
- }
- this.breadcrumbs = matched.filter((item) => {
- return item.meta && item.meta.title && item.meta.breadcrumb !== false;
- });
- }
- /**
- * 关系模块
- *
- */
- relationModel(matched: any = []) {
- if (matched.length >= 2 && matched[1].path == '/maintain/relation') {
- matched[1] = {
- path: "/maintain/relationship",
- meta: {
- title: '关系',
- }
- },
- matched[2] = {
- path: "/maintain/relationship",
- meta: {
- title: this.$route.query.relationTypeName,
- hidden: true,
- }
- }
- }
- return matched
- }
- // private isDashboard(route: RouteRecord) {
- // const name = route && route.meta && route.meta.title;
- // return name === "Dashboard";
- // }
- private pathCompile(path: string) {
- // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
- const { params } = this.$route;
- const toPath = compile(path);
- return toPath(params);
- }
- private handleLink(item: any) {
- const { redirect, path } = item;
- if (redirect) {
- this.$router.push(redirect);
- return;
- }
- this.$router.push(this.pathCompile(path));
- }
- }
- </script>
- <style lang="scss" scoped>
- .el-breadcrumb__inner,
- .el-breadcrumb__inner a {
- font-weight: 400 !important;
- }
- .app-breadcrumb.el-breadcrumb {
- display: inline-block;
- font-size: 14px;
- height: 30px;
- line-height: 40px;
- margin-left: 8px;
- .no-redirect {
- color: #97a8be;
- cursor: text;
- }
- }
- </style>
|