vue element-ui实现动态面包屑导航


Posted in Javascript onDecember 23, 2019

vue element-ui动态面包屑导航,供大家参考,具体内容如下

直接上代码

一、template代码

// 这是单独的组件
<template>
 <el-breadcrumb separator-class="el-icon-arrow-right">
 // 首页我是写死的,其他的遍历出来
 <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
 // 因为路由是后台返回的,所以取title是按照后台格式来取的
 <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{
  item.meta.title
 }}</el-breadcrumb-item>
 </el-breadcrumb>
</template>

二、script代码

export default {
 // 初始化数据对象
 data() {
 return {
  breadList: []
 };
 },
 // 监听属性
 watch: {
 // 监听路由
 $route(val) {
  // 调用获取路由数组方法
  this.getBreadList(val);
 }
 },
 // 自定义事件
 methods: {
 /**
  * @description 获取路由数组
  * @params val 路由参数
  * @author tw
  */
 getBreadList(val) {
  // 过滤路由matched对象
  if (val.matched) {
  let matched = val.matched.filter(item => item.meta && item.meta.title);
  // 拿到过滤好的路由v-for遍历出来
  this.breadList = matched;
  }
 }
 }
}

三、css代码

css样式是放在一个单独的样式文件夹里面

/* 面包屑导航 */
.el-breadcrumb {
 @include ptrbl(16px,16px,16px,16px);
 box-sizing: border-box;
 background: $white;
 border-bottom: 1px solid #EEE;
}

以上就是面包屑的制作过程了。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
vue实现图片上传预览功能
Dec 23 #Javascript
vue项目实现图片上传功能
Dec 23 #Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 #Javascript
vue图片上传组件使用详解
Dec 23 #Javascript
微信小程序实现签字功能
Dec 23 #Javascript
使用JS location实现搜索框历史记录功能
Dec 23 #Javascript
vue实现移动端图片上传功能
Dec 23 #Javascript
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
php实现登陆模块功能示例
2016/10/20 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Django中使用group_by的方法
2015/05/26 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
python实现两个文件夹的同步
2019/08/29 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
同事打架检讨书
2015/05/06 职场文书
党支部对转正的意见
2015/06/02 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android