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代码
May 22 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
localStorage实现便签小程序
Nov 28 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
AngularJS表单验证功能分析
May 26 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
使用python实现BLAST
2018/02/12 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python3实现定时任务的四种方式
2019/06/03 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python实现大学人员管理系统
2019/10/25 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
用Python进行websocket接口测试
2020/10/16 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
求职简历自我评价范例
2014/03/12 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
欢送领导祝酒词
2015/08/12 职场文书
nginx配置之并发频次限制
2022/04/18 Servers
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL