《vue3+ts+element-plus 后台管理系统系列四》之面包屑

星宇大前端

发布于 2021-02-22 14:58:42

1.7K0

发布于 2021-02-22 14:58:42

文章被收录于专栏：大宇笔记大宇笔记

vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。

演示地址：https://admin-tmpl.rencaiyoujia.com/
github地址：https://github.com/rcyj-FED/vue3-composition-admin

面包屑

代码引用 @/bread-crumb.Index.vue

面包屑是基于el-breadcrumb UI不是问题，element-plus封装的比较好。数据源来源简单说下。

1、监听路由变化

监听路由的变化，变化之后获取组装数据源

 watch(() => currentRoute.path, (path) => {
      if (path.startsWith('/redirect/')) {
        return
      }
      state.getBreadcrumb()
    })

2、组装数据源

$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
        })
      },

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-02-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https