fix: fix abnormal breadcrumb status

This commit is contained in:
vben 2020-10-23 00:04:26 +08:00
parent f75425d13b
commit 144fde8a68
1 changed files with 16 additions and 26 deletions

View File

@ -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>
); );
}); });