index.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <el-breadcrumb class="app-breadcrumb" separator="/">
  3. <transition-group name="breadcrumb">
  4. <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
  5. <span v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1"
  6. class="no-redirect">{{ item.meta.title }}</span>
  7. <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
  8. </el-breadcrumb-item>
  9. </transition-group>
  10. </el-breadcrumb>
  11. </template>
  12. <script lang="ts">
  13. import { compile } from "path-to-regexp";
  14. import { Component, Vue, Watch } from "vue-property-decorator";
  15. import { RouteRecord, Route } from "vue-router";
  16. @Component({
  17. name: "Breadcrumb",
  18. })
  19. export default class extends Vue {
  20. private breadcrumbs: RouteRecord[] = [];
  21. @Watch("$route")
  22. private onRouteChange(route: Route) {
  23. // if you go to the redirect page, do not update the breadcrumbs
  24. if (route.path.startsWith("/redirect/")) {
  25. return;
  26. }
  27. this.getBreadcrumb();
  28. }
  29. created() {
  30. this.getBreadcrumb();
  31. }
  32. private getBreadcrumb() {
  33. let matched = this.$route.matched.filter((item) => item.meta && item.meta.title);
  34. const first = matched[0];
  35. //针对关系模块添加面包屑
  36. if (first) {
  37. matched = this.relationModel(matched)
  38. }
  39. this.breadcrumbs = matched.filter((item) => {
  40. return item.meta && item.meta.title && item.meta.breadcrumb !== false;
  41. });
  42. }
  43. /**
  44. * 关系模块
  45. *
  46. */
  47. relationModel(matched: any = []) {
  48. if (matched.length >= 2 && matched[1].path == '/maintain/relation') {
  49. matched[1] = {
  50. path: "/maintain/relationship",
  51. meta: {
  52. title: '关系',
  53. }
  54. },
  55. matched[2] = {
  56. path: "/maintain/relationship",
  57. meta: {
  58. title: this.$route.query.relationTypeName,
  59. hidden: true,
  60. }
  61. }
  62. }
  63. return matched
  64. }
  65. // private isDashboard(route: RouteRecord) {
  66. // const name = route && route.meta && route.meta.title;
  67. // return name === "Dashboard";
  68. // }
  69. private pathCompile(path: string) {
  70. // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
  71. const { params } = this.$route;
  72. const toPath = compile(path);
  73. return toPath(params);
  74. }
  75. private handleLink(item: any) {
  76. const { redirect, path } = item;
  77. if (redirect) {
  78. this.$router.push(redirect);
  79. return;
  80. }
  81. this.$router.push(this.pathCompile(path));
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped>
  86. .el-breadcrumb__inner,
  87. .el-breadcrumb__inner a {
  88. font-weight: 400 !important;
  89. }
  90. .app-breadcrumb.el-breadcrumb {
  91. display: inline-block;
  92. font-size: 14px;
  93. height: 30px;
  94. line-height: 40px;
  95. margin-left: 8px;
  96. .no-redirect {
  97. color: #97a8be;
  98. cursor: text;
  99. }
  100. }
  101. </style>