index.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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" 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. <script lang="ts">
  12. import { compile } from "path-to-regexp";
  13. import { Component, Vue, Watch } from "vue-property-decorator";
  14. import { RouteRecord, Route } from "vue-router";
  15. @Component({
  16. name: "Breadcrumb",
  17. })
  18. export default class extends Vue {
  19. private breadcrumbs: RouteRecord[] = [];
  20. @Watch("$route")
  21. private onRouteChange(route: Route) {
  22. // if you go to the redirect page, do not update the breadcrumbs
  23. if (route.path.startsWith("/redirect/")) {
  24. return;
  25. }
  26. this.getBreadcrumb();
  27. }
  28. created() {
  29. this.getBreadcrumb();
  30. }
  31. private getBreadcrumb() {
  32. let matched = this.$route.matched.filter((item) => item.meta && item.meta.title);
  33. const first = matched[0];
  34. this.breadcrumbs = matched.filter((item) => {
  35. return item.meta && item.meta.title && item.meta.breadcrumb !== false;
  36. });
  37. }
  38. private isDashboard(route: RouteRecord) {
  39. const name = route && route.meta && route.meta.title;
  40. return name === "Dashboard";
  41. }
  42. private pathCompile(path: string) {
  43. // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
  44. const { params } = this.$route;
  45. const toPath = compile(path);
  46. return toPath(params);
  47. }
  48. private handleLink(item: any) {
  49. const { redirect, path } = item;
  50. if (redirect) {
  51. this.$router.push(redirect);
  52. return;
  53. }
  54. this.$router.push(this.pathCompile(path));
  55. }
  56. }
  57. </script>
  58. <style lang="scss" scoped>
  59. .el-breadcrumb__inner,
  60. .el-breadcrumb__inner a {
  61. font-weight: 400 !important;
  62. }
  63. .app-breadcrumb.el-breadcrumb {
  64. display: inline-block;
  65. font-size: 14px;
  66. height: 30px;
  67. line-height: 40px;
  68. margin-left: 8px;
  69. .no-redirect {
  70. color: #97a8be;
  71. cursor: text;
  72. }
  73. }
  74. </style>