bread.vue 962 B

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <el-breadcrumb separator="/">
  3. <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  4. <el-breadcrumb-item v-for="(item, index) in catalog" :key="index">{{ item }}</el-breadcrumb-item>
  5. </el-breadcrumb>
  6. </template>
  7. <script>
  8. const DeepFind = (menus, path) => {
  9. for (const k in menus) {
  10. const item = menus[k];
  11. //if (item.options.path == path) return menus[k];
  12. if (path.endsWith(item.options.path)) return menus[k];
  13. if (item.children) {
  14. const res = DeepFind(item.children, path);
  15. if (res) return res;
  16. }
  17. }
  18. return false;
  19. };
  20. export default {
  21. computed: {
  22. catalog() {
  23. // console.log(this.$route)
  24. // return this.$route.meta.catalog;
  25. const menu = DeepFind(this.menuItems, this.$route.path);
  26. return (menu && menu.options && menu.options.meta && menu.options.meta.catalog) || [];
  27. },
  28. menuItems() {
  29. return this.$store.state.menu.items;
  30. },
  31. },
  32. };
  33. </script>