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的性能
Feb 06 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
浅析JS异步加载进度条
May 05 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
javascript填充默认头像方法
Feb 22 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php 文件上传系统手记
2009/10/26 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Python struct模块解析
2014/06/12 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
银行类自荐信
2014/02/04 职场文书
新学期标语
2014/06/30 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
Python Numpy库的超详细教程
2022/04/06 Python
Linux中sftp常用命令整理
2022/06/28 Servers
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python