vue+elementUI动态生成面包屑导航教程


Posted in Javascript onNovember 04, 2019

效果如下所示:

vue+elementUI动态生成面包屑导航教程

项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示

<el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect">
    <div class="user-menu-box" v-for="menu in menus" :key="menu.id">
      <el-menu-item v-if="!menu.child" :index="menu.path">
        <icon :name="menu.icon" :w="20" :h="20"></icon>
        <span slot="title" v-text="menu.name"></span>
      </el-menu-item>
      <el-submenu v-if="menu.child" :index="menu.path">
        <template slot="title">
          <icon :name="menu.icon" :w="20" :h="20"></icon>
          <span slot="title" v-text="menu.name"></span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="subMenu in menu.child" :key="subMenu.id" v-text="subMenu.name"
            :index="subMenu.path"></el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
</el-menu>

上面的代码是elementUI组件的样式,根据项目需要做了修改,搬运的时候根据项目自己改改

export default {
  data () {
    return {
      activeMenu: '',
      indexBreadcrumbs: [],
      menus: [{
        id: '1',
        name: '门户管理',
        icon: 'menhuguanli',
        path: '#2',
        child: [{
          id: '1-1',
          name: '轮播图',
          path: '/backstage/protaManage/turns'
        }, {
          id: '1-2',
          name: '基础数据',
          path: '/backstage/protaManage/basis'
        }, {
          id: '1-3',
          name: '分类管理',
          path: '/backstage/protaManage/classify'
        }, {
          id: '1-4',
          name: '内容发布',
          path: '/backstage/protaManage/content'
        }]
      }, {
        id: '2',
        name: '我的云盘',
        icon: 'yunpan',
        path: '/backstage/yunManage'
      }, {
        id: '3',
        name: '管理菜单',
        icon: 'shezhi',
        path: '/backstage/menusManage'
      }, {
        id: '4',
        name: '编辑板块',
        icon: 'fabuzhongxin',
        path: '/backstage/editPlate'
      }]
    }
  },
  watch: {
    $route () {
      this.handChange()
    }
  },
  computed: {
    breadcrumbList () {
      let breadcrumbs = []
      let menuList = this.menus
      this.indexBreadcrumbs.map(item => {
        for (let i = 0; i < menuList.length; i++) {
          if (item === menuList[i].path) {
            breadcrumbs.push(menuList[i])
            if (menuList[i].child) {
              menuList = menuList[i].child
            }
            break;
          }
        }
      })
      return breadcrumbs
    }
  },
  methods: {
    handChange () {
      this.$emit('hand-change', this.breadcrumbList)
    },
    handleSelect (index, indexPath) {
      this.indexBreadcrumbs = indexPath
    }
  },
  created () {
    this.handChange()
  }
}

上面的代码是模拟的数据,调用elememtUI的组件导航菜单的中的@select方法,有两个参数,可以自行打印

vue+elementUI动态生成面包屑导航教程

然后在computed中计算当前选中的是哪一部分,取到返回值,然后$emit传给父组件,

<el-breadcrumb separator-class="el-icon-arrow-right">
   <el-breadcrumb-item :to="{ path: '/backstage' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item v-for="o in breadcrumbList" :key="o.id">{{o.name}}
   </el-breadcrumb-item>
 </el-breadcrumb>

父组件中取到子组件传过来的值后,直接渲染就行了

Javascript 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
javascript 实现 原路返回
Jan 21 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 #Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 #Javascript
vue双向绑定数据限制长度的方法
Nov 04 #Javascript
使用p5.js临摹动态图片
Nov 04 #Javascript
p5.js绘制创意自画像
Nov 04 #Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 #Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 #Javascript
You might like
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
浅谈javascript的调试
2015/01/28 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python 实现兔子生兔子示例
2019/11/21 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
公司活动策划方案
2014/01/13 职场文书
小学生环保标语
2014/06/13 职场文书
精神病医院见习报告
2014/11/03 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书