效果

面包屑作用

面包屑应该是我们在项目中经常使用的一个功能，一般情况下它用来表示我们当前所处的站点位置，也可以帮助我们能够更快的回到上个层级

原始方式

最笨的方法就是在每个需要面包屑的页面中固定写好

<template><div class="example-container"><el-breadcrumb separator="/"><el-breadcrumb-itemv-for="(item,index) in breadList":key="index":to="{ path: item.path }">{{item.name}}</el-breadcrumb-item></el-breadcrumb></div>
</template>
<script>
export default {name: "Example",data() {return {breadList: [{name: "首页",path: "/home"}, {name: "系统设置",path: "/setting"}, {name: "用户管理",path: "/setting/usermanage"}]};}
};
</script>

如果按照上述方式去实行的话，虽然我们可以完成面包屑的功能，但是它不够灵活，在每个需要的页面添加，带来的维护成本是巨大的。
最主要的是你们的产品天天变需要咋办，还不累死。有人说登哥我就喜欢这么改，只有这样我才会有工作量。
好吧那当我没说，但是我劝你善良，登哥劝你一句，把那些大量重复的工作尽可能的赶紧做完，剩下的时间你才能自由安排，进行充能呀。
否则，你拿什么进步？普通的人总是喜欢抱怨没有时间，而优秀的人就是这么把时间省下来的。他们知道什么事情重要，什么事情不重要。

利用Route路由元信息

把路径结构配置在 Route meta 属性中

const router = new Router({routes: [{path: '/example',name: 'example',component: Example,meta: {breadList: [{name: "首页",path: "/home"}, {name: "系统设置",path: "/setting"}, {name: "用户管理",path: "/setting/usermanage"}]}}]
});
export default router;

然后我们直接在页面中使用计算属性获取数据

<template>//...略
</template>
<script>
export default {name: "Example",computed: {breadList() {return this.$route.meta.breadList || [];}}
};
</script>

这样也能实现我要想的效果，但是这个还是显得比较冗余，路由数据已经定义好一次结构，还要加上一个专门的面包屑数据，造成代码的重复，不推荐使用

路由对象 matched 属性

首先先来看看官方对 matched 的讲解。
matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录。
可以看到当我们定义好路由结构以后，我们就可以获取到当前页面的路由记录。
首先我们先创建一个面包屑的组件。

//Breadcrumb.vue
<script>
export default {data() {return {breadList: [] // 路由集合};},watch: {$route() {this.getBreadcrumb();}},methods: {isHome(route) {return route.name === "home";},getBreadcrumb() {let matched = this.$route.matched;//如果不是首页if (!this.isHome(matched[0])) {matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);}this.breadList = matched;}},created() {this.getBreadcrumb();}
};
</script>

创建完组件之后，在需要的地方注入即可。如果你的网页结构布局合理恰当的话只需要一处引用就可以所有网页使用啦

定义的路由信息

const router = new Router({routes: [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: Home,meta: { title: '首页' }},{path: '/setting',name: "setting",component: () => import('./views/setting/Setting.vue'),redirect: '/setting/user',meta: { title: '系统设置' },children: [{path: 'user',component: () => import('./views/setting/UserMange.vue'),name: 'usermanage',meta: { title: '用户管理' }}, {path: 'message',component: () => import('./views/setting/MesMange.vue'),name: 'mesmanage',meta: { title: '短信管理' }}]},{path: '/example',name: 'example',component: Example,meta: { title: '综合实例' }}]
});
export default router;

可以看到我们非常灵活的实现出我们需要的效果。可能这个功能并没有完善，比如有些页面不需要怎么办？
其实只要我们过滤下数据就可以实现，比如利用 meta 不存在时面包屑数据置空，或者增加一个数据标示面包屑的现实隐藏。等等都是一种思路。小伙伴们不妨发挥自己的想象试试吧。

Vue项目之Element-UI(Breadcrumb)动态面包屑效果相关推荐

【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
css画表格多级表头,element UI实现动态生成多级表头
一.效果图二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
七十三、Vue项目城市详细页的动态路由，Banner布局和公用图片画廊组件拆分
2020/11/04. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
vue动态面包屑导航的使用
动态面包屑导航是根据路由中的 matched 获取到的单独提取出面包屑导航栏组件 <template><el-breadcrumb class="app-breadcru ...
模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
在vue项目前端如何实现展示动态小程序二维码
在vue项目前端如何实现展示动态小程序二维码 (就是根据所对应的商家数据展示一个动态的二维码) 首先,主要的工作还是后端和小程序前端的工作,我们vue项目的前端主要是根据他们给出的url一级所对应的参 ...
如何实现带动画的动态面包屑，来看看？
大家好,我是派大星,最近在自己手动搭建一个后台管理平台,将其命名为 "雷达行动 Radar-Solution" ,在开发的过程中对比了一下其他已经成型的后台解决方案,发现都存在一个 ...

Vue项目之Element-UI(Breadcrumb)动态面包屑效果

效果

面包屑作用

原始方式

利用Route路由元信息

路由对象 matched 属性

定义的路由信息

Vue项目之Element-UI(Breadcrumb)动态面包屑效果相关推荐

最新文章

热门文章