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 相关文章推荐
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
对Python3 序列解包详解
2019/02/16 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
教师评优事迹材料
2014/01/10 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
JavaScript 反射学习技巧
2021/10/16 Javascript