Newer
Older
KaiFengPC / src / components / Breadcrumb / index.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <el-breadcrumb class="app-breadcrumb" separator="/">
  3. <transition-group name="breadcrumb">
  4. <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
  5. <span v-if="item.redirect === 'noRedirect' || index == levelList.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.  
  12. <script setup>
  13. const route = useRoute();
  14. const router = useRouter();
  15. const levelList = ref([]);
  16.  
  17. function getBreadcrumb() {
  18. // only show routes with meta.title
  19. let matched = route.matched.filter(item => item.meta && item.meta.title);
  20. const first = matched[0];
  21. // 判断是否为首页
  22. if (!isDashboard(first)) {
  23. matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
  24. }
  25.  
  26. levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false);
  27. }
  28. function isDashboard(route) {
  29. const name = route && route.name;
  30. if (!name) {
  31. return false;
  32. }
  33. return name.trim() === 'Index';
  34. }
  35. function handleLink(item) {
  36. const { redirect, path } = item;
  37. if (redirect) {
  38. router.push(redirect);
  39. return;
  40. }
  41. router.push(path);
  42. }
  43.  
  44. watchEffect(() => {
  45. // if you go to the redirect page, do not update the breadcrumbs
  46. if (route.path.startsWith('/redirect/')) {
  47. return;
  48. }
  49. getBreadcrumb();
  50. });
  51. getBreadcrumb();
  52. </script>
  53.  
  54. <style lang="scss" scoped>
  55. .app-breadcrumb.el-breadcrumb {
  56. display: inline-block;
  57. font-size: 14px;
  58. line-height: 50px;
  59. margin-left: 8px;
  60.  
  61. .no-redirect {
  62. cursor: text;
  63. }
  64. }
  65. </style>