侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

vue element-ui实现动态面包屑导航

微信(小程序)  /  管理员 发布于 2年前   529

vue element-ui动态面包屑导航,供大家参考,具体内容如下

直接上代码

一、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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • Vue 解决多级动态面包屑导航的问题
  • vue+elementUI动态生成面包屑导航教程
  • Vuex,iView UI面包屑导航使用扩展详解
  • vue中的面包屑导航组件实例代码
  • vue2.0 elementUI制作面包屑导航栏
  • vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
  • vue实现导航栏效果(选中状态刷新不消失)
  • vue实现nav导航栏的方法
  • vue2.0实现导航菜单切换效果
  • 非常实用的vue导航钩子


  • 上一条:
    微信小程序button标签open-type属性原理解析
    下一条:
    微信小程序如何通过用户授权获取手机号(getPhoneNumber)
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • TP(3/5)
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 百度小程序详情页中使用wxapp-rich-text组件解析html标签并展示出来(0个评论)
    • 百度小程序列表中点击跳转详情页流程步骤(0个评论)
    • 百度小程序封装get post请求等全局函数及实现请求后端api数据循环展示功能(0个评论)
    • 近期文章
    • php语言中检测及转换文件字符编码函数介绍(0个评论)
    • laravel中轻量化的钱包实现方案:Laravel Wallet(0个评论)
    • mysql性能优化之8种常见SQL错误用法(0个评论)
    • Laravel 9.13版本发布(0个评论)
    • beego+GeoLite2免费数据库获取ip地址经纬度等定位归属信息(0个评论)
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • PHP + Memcache实现简单的统计当前在线人数功能(0个评论)
    • Thinkphp5.1框架中实现Session+Redis会话共享流程步骤(0个评论)
    • go语言中使用Signbit()函数判断一个整数是正数或负数(0个评论)
    • 删库跑路之一链家程序员删除公司9TB数据被判7年,望各大码农警之!(0个评论)
    • 近期评论
    • 阿凡达123 在

      golang 怎么做热更新中评论 也可以看看这个:https://github.com/edwingeng/hot..
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 路过的靓仔 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..
    • 激光豆芽 在

      为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客