fix: fix abnormal breadcrumb status
This commit is contained in:
parent
f75425d13b
commit
144fde8a68
|
|
@ -10,20 +10,23 @@ import { PageEnum } from '/@/enums/pageEnum';
|
||||||
import { isBoolean } from '/@/utils/is';
|
import { isBoolean } from '/@/utils/is';
|
||||||
|
|
||||||
import { compile } from 'path-to-regexp';
|
import { compile } from 'path-to-regexp';
|
||||||
import Icon from '/@/components/Icon';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'BasicBreadcrumb',
|
name: 'BasicBreadcrumb',
|
||||||
props: {
|
setup() {
|
||||||
showIcon: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const itemList = ref<AppRouteRecordRaw[]>([]);
|
const itemList = ref<AppRouteRecordRaw[]>([]);
|
||||||
|
|
||||||
const { currentRoute, push } = useRouter();
|
const { currentRoute, push } = useRouter();
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => currentRoute.value,
|
||||||
|
() => {
|
||||||
|
if (unref(currentRoute).name === 'Redirect') return;
|
||||||
|
getBreadcrumb();
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
function getBreadcrumb() {
|
function getBreadcrumb() {
|
||||||
const { matched } = unref(currentRoute);
|
const { matched } = unref(currentRoute);
|
||||||
const matchedList = matched.filter((item) => item.meta && item.meta.title).slice(1);
|
const matchedList = matched.filter((item) => item.meta && item.meta.title).slice(1);
|
||||||
|
|
@ -63,36 +66,23 @@ export default defineComponent({
|
||||||
return push(pathCompile(path));
|
return push(pathCompile(path));
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
|
||||||
() => currentRoute.value,
|
|
||||||
() => {
|
|
||||||
if (unref(currentRoute).name === 'Redirect') return;
|
|
||||||
getBreadcrumb();
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<Breadcrumb class="layout-breadcrumb">
|
<Breadcrumb class="layout-breadcrumb">
|
||||||
{() => (
|
{() => (
|
||||||
<TransitionGroup name="breadcrumb">
|
<TransitionGroup name="breadcrumb">
|
||||||
{() => {
|
{() => {
|
||||||
return unref(itemList).map((item) => {
|
return unref(itemList).map((item) => {
|
||||||
const isLink = !!item.redirect && !item.meta.disabledRedirect;
|
const isLink =
|
||||||
|
(!!item.redirect && !item.meta.disabledRedirect) ||
|
||||||
|
!item.children ||
|
||||||
|
item.children.length === 0;
|
||||||
return (
|
return (
|
||||||
<BreadcrumbItem
|
<BreadcrumbItem
|
||||||
key={item.path}
|
key={item.path}
|
||||||
isLink={isLink}
|
isLink={isLink}
|
||||||
onClick={handleItemClick.bind(null, item)}
|
onClick={handleItemClick.bind(null, item)}
|
||||||
>
|
>
|
||||||
{() => (
|
{() => item.meta.title}
|
||||||
<>
|
|
||||||
{props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
|
|
||||||
<Icon icon={item.meta.icon} class="icon mr-1 mb-1" />
|
|
||||||
)}
|
|
||||||
{item.meta.title}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</BreadcrumbItem>
|
</BreadcrumbItem>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue