提交 144fde8a 作者: vben

fix: fix abnormal breadcrumb status

上级 f75425d1
...@@ -10,20 +10,23 @@ import { PageEnum } from '/@/enums/pageEnum'; ...@@ -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({ ...@@ -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>
); );
}); });
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论