vue3-composition-admin 是一个管理端模板解决方案,它是基于vue3,ts和element-plus,项目都是以composition api风格编写。
面包屑是基于el-breadcrumb
UI不是问题,element-plus封装的比较好。数据源来源简单说下。
监听路由的变化,变化之后获取组装数据源
watch(() => currentRoute.path, (path) => {
if (path.startsWith('/redirect/')) {
return
}
state.getBreadcrumb()
})
$route.matched 函数会返回router 匹配数组。
比如当前路径是:/foo/bar
,那么matched匹配的就是 ['/','/foo','/foo/bar']
getBreadcrumb: () => {
// 过滤 currentRoute.matched 数组里面有meta.title的item
let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
const frist = matched[0]
//如果第一个不是首页,添加上
if (!state.isDashboard(frist)) {
matched = [{ path: '/dashboard', meta: { title: 'dashboard' } } as any].concat(matched)
}
//过滤不符合要求的数组
state.breadcrumbs = matched.filter((item) => {
return item.meta && item.meta.title && item.meta.breadcrumb !== false
})
},