export const getUserMenuList = () => {
// return new Promise((resolve) => {
// $ui.showLoading("正在获取菜单");
// setTimeout(() => {
// resolve(routes);
// $ui.hideLoading();
// }, 500);
// });
return server({
url: "",
method: "get",
}).then((res) => {
let originList = res.data;
function diMenu(list) {
list.sort((a, b) => a.sort - b.sort);
return list.map((item) => {
return {
path: item.router,
name: item.router,
component: () => import(`@/views${item.componentPath}`),
children:
item.children && item.children.length
? diMenu(item.children)
: null,
meta: {
title: item.name,
hidden: item.type == 10,
},
};
});
}
return diMenu(originList);
});
};
利用this.$route.matched实现面包屑
先打印下this.$route:
<template>
<div class="qz-bread flex-jasc">
<div class="flex-aic">
<div
class="qz-bread-item flex-aic"
v-for="(item, index) in navs"
:key="index"
>
<div>{{ item.title || item }}</div>
<div class="qz-bread-item-split" v-if="index < navs.length - 1">/</div>
</div>
</div>
<slot name="right"></slot>
</div>
</template>
<script>
export default {
name: "QzBread",
props: {
list: {
type: Array,
},
},
data() {
return {
navs: [],
};
},
mounted() {
let navs = [];
if (this.list) {
navs = [...this.list];
} else {
navs = this.$route.matched
.filter((v) => v?.meta?.title || "")
.map((v) => ({
path: v.path || "",
title: v.meta.title,
}));
}
this.navs = navs;
},
};
</script>