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当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
JS实现省市县三级下拉联动
Apr 10 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批量上传的实现代码
2013/06/09 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
angular实现IM聊天图片发送实例
2017/05/08 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python作用域与名字空间原理详解
2020/03/21 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
解决方案设计综合面试题
2015/08/31 面试题
酒吧员工的岗位职责
2013/11/26 职场文书
社区活动邀请函范文
2014/01/29 职场文书
闭幕式主持词
2014/04/02 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
高三英语复习计划
2015/01/19 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
python实现语音常用度量方法的代码详解
2021/05/25 Python
Win11 BitLocker 驱动器加密
2022/04/19 数码科技