面包屑导航 vue-element-admin

最新推荐文章于 2024-04-28 00:32:41 发布

原创最新推荐文章于 2024-04-28 00:32:41 发布 · 2.9k 阅读

14 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

element-ui

5 篇文章

订阅专栏

本文详细介绍了如何在Element UI中设置面包屑导航，包括可点击和不可点击的样式，以及如何根据路由变化动态生成面包屑路径。关键点在于使用`matched`属性来构建面包屑导航，并通过`watch`监听路由变化。同时，文章提到了如何处理动态路由和`breadcrumb: false`的情况，确保导航的正确性和交互体验。在路由变化时，通过`getBreadcrumb`函数生成新的面包屑导航，利用`redirect`和`path`处理不同场景。此外，还涉及了如何处理没有`title`的路由项和添加默认的`dashboard`导航项。

tagsView
要想在tagsView上显示对应的名字需要这样写
在这里插入图片描述

面包屑导航可以分为可点击和不可点击两种

不可点击是灰色的，黑色的是个链接，点击后路由是会发生变化的并且会跳转到对应的页面，
在这里插入图片描述

element ui —el-breadcrumb-item
这个组件分为两个部分，一个是容器，通过separator来控制文本分割线
一个是el-breadcrumb-item:是面包屑导航的子项目，可通过to属性来切换路由，

做外链的时候通常可以用a标签,仅仅只是切换不同的组件，显示不同页面的时候可以用to属性。

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

路由与面包屑导航映射难点

导航的过程是使用a标签来实现
在这里插入图片描述
如果不需要导航的话就用到了span标签

关键点是这里的levelList 怎么生成的呢
在created中，生成面包屑导航

还有一个监听路由

路由发生变化的时候，会重新生成一个面包屑导航
比如说，我们在点击图书管理的时候，他会生成一个面包屑导航，点击图书列表时，面包屑导航会发生变化，所以，在路由切换的时候，是通过watch来进行的生成的

进入到getBreadcrumb
知识点：matched属性
在这里插入图片描述
打印一下matched的值

在这里插入图片描述

它显示的数组其实就是路由匹配的过程

这句话的作用是过滤掉没有title的
在这里插入图片描述

过滤完会把第一项取出来
然后第一项取出来做一个判断，是不是dashboard，如果不是的话会把第一项加入dashboard路由，加入完和后面进行相连
在这里插入图片描述
判断是否为dashboard：

所以说dashboard是被强加进去的
有这句话的话，就是说如果你的路由都没写title，最起码能显示个dashboard
这是一个交互上的细节

他还会再进行一次过滤
在里插入图片描述
因为我们有的时候会写 breakcrumb:false 不做导航，这时候过滤掉的是这些
这样就拿到了levelLIst 拿到了以后就进行循环，循环之后会判断
在这里插入图片描述

index==levelList.length-1吗表示最后一个元素是不会显示direct的显示成灰色，
否则的话title里面的内容就会被展示出来
这个路由本身会传入handleLink
在这里插入图片描述
取出其中的redirect，如果存在redirect就调用redirect
比如说book是包含redirect的

如果不包含，就对path进行处理，处理以后就能进行访问了

如果页面中需要有动态路由的场景，并且动态路由要加入到导航，那么这个pathCompile这段代码可以解决问题