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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
JointJS流程图的绘制方法
Dec 03 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控制网页过期时间的代码
2008/09/28 PHP
PHP 文件类型判断代码
2009/03/13 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
简单的分页代码js实现
2016/05/17 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
python三方库之requests的快速上手
2019/03/04 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
最小二乘法及其python实现详解
2020/02/24 Python
python爬虫基础知识点整理
2020/06/02 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
python asyncio 协程库的使用
2021/01/21 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
经营目标责任书
2015/05/08 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js