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 Array Flatten 与递归使用介绍
Oct 30 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 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
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python生成器以及应用实例解析
2018/02/08 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
Prototype如何更新局部页面
2013/03/03 面试题
求职简历自荐信
2013/10/20 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
高中同学会活动方案
2014/08/14 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技