element动态路由面包屑的实现示例

2022-04-18

要掌握：localStorage，组件封装?

【element动态路由面包屑的实现示例】emm，第一次上传视频转gif的图片，效果不咋好。。。
视频转gif 的软件连接 https://www.jb51.net/softs/723131.html
在 components 下新建一个 curmbs 文件夹，并在该文件夹下新建一个 index.vue 文件。
router.js 中的配置，添加一个 meta对象

文章图片

代码

.box-card{margin-bottom: 20px; }

上面 localStorage存储的name, path,breadNum 是我测试的时候存的，也可以删除，简洁版代码：

.box-card{margin-bottom: 20px; }

注册

element动态路由面包屑的实现示例

文章图片

如果想要一部分页面显示该组件，一部分不显示，那么需要用到 props 传参。
具体做法参考：
（1）在 index.js 中

export default {props:{isShow:{type:Boolean,default:true //默认值为true 显示}}}

(2) 组件调用时

//false表示不显示面包屑

如果想要将左侧主导航栏也显示出来，则添加代码：
原代码：

{{level.name}}

{{$route.matched[0].name}}

到此这篇关于element动态路由面包屑的实现示例的文章就介绍到这了,更多相关element动态路由面包屑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

推荐阅读

上一篇：什么是Java自旋锁

下一篇：使用Flutter，我写了一个开源版本的HandShaker