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 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
Vue混入mixins滚动触底的方法
Nov 22 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
JS location几个方法小姐
2008/07/09 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python实现的各种排序算法代码
2013/03/04 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python字典底层实现原理详解
2019/12/18 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Django使用rest_framework写出API
2020/05/21 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
应届大专毕业生个人自荐信
2013/09/22 职场文书
会议接待欢迎标语
2014/10/08 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
Python中的嵌套循环详情
2022/03/23 Python