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 相关文章推荐
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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 获取select下拉列表框的值
2010/05/08 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP goto语句用法实例
2019/08/06 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
用Python实现职工信息管理系统
2020/12/30 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
锦旗标语大全
2014/06/23 职场文书
2014年教务工作总结
2014/12/03 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
给医院的感谢信
2015/01/21 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
深入理解redis中multi与pipeline
2021/06/02 Redis
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js