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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
element ui分页多选,翻页记忆的实例
Sep 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实现读取一个1G的文件大小
2013/08/24 PHP
PHP的PSR规范中文版
2013/09/28 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
python接口自动化框架实战
2020/12/23 Python
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
销售人员求职的自我评价分享
2014/03/15 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2014年预算员工作总结
2014/12/05 职场文书
个人借条范本
2015/05/25 职场文书
婚庆司仪开场白
2015/05/29 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
python 中的@运算符使用
2021/05/26 Python