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方法,有两个参数,可以自行打印

然后在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>

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

(0)

相关推荐

  • vue中的面包屑导航组件实例代码

    vue的面包屑导航组件 用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat

  • vue2.0 elementUI制作面包屑导航栏

    Main.js var routeList = []; router.beforeEach((to, from, next) => { var index = -1; for(var i = 0; i < routeList.length; i++) { if(routeList[i].name == to.name) { index = i; break; } } if (index !== -1) { //如果存在路由列表,则把之后的路由都删掉 routeList.splice(index

  • Vuex,iView UI面包屑导航使用扩展详解

    本案例是基于Vuex的公共数据库,你在了解本案例之前要了解Vuex的使用方法. https://www.iviewui.com/components/breadcrumb 打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的.但是我们项目中常常用到单页面查询面包屑导航.小生开始为这个纠结好久.然后和小伙伴一起研究出来一套单页面不用路由跳转的使用方法. 先看看效果图 1,首次进来 2,查询结果 3,再次点击面包屑导航 4,查询结果 基本的效果是这样的 下面看代码 <template> <

  • Vue 解决多级动态面包屑导航的问题

    固定路由的面包屑导航 我们在配置router的时候,可以将面包屑数据配置在meta中, 例如 路由配置: { path: '/project/process/:id', name: 'process', component: () => import('@/views/project/process/main.vue'), meta: [ { name: '项目管理列表' }, { name: '项目列表', url: '/project/list' }, { name: '里程碑' }, ],

  • 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.

  • vue+element-ui动态生成多级表头的方法

    vue+element html配置: <div id="table">{{tableData}} <el-table :data="tabledata01" :span-method="tableSpanMethod" max-height="420"> <el-table-column v-for='item in tableConfig' :label="item.label&qu

  • vue 使用localstorage实现面包屑的操作

    mutation.js代码: changeRoute(state, val) { let routeList = state.routeList; let isFind = false; let findeIdex = 0; //菜单栏和下拉的二级菜单 if (val['type'] == 'header' || val['type'] == 'secondHeader') { routeList.length = 0; //顶级菜单清除缓存 localStorage.removeItem("r

  • 利用React高阶组件实现一个面包屑导航的示例

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁,比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的. 使用 React 高阶组件的好处 在工作中,我们经常会有很多功能相似,组件代码重复的页面需求,通常我们可以通过完全复制一遍代码的方式实现功能,但是这

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

    vue element-ui动态面包屑导航,供大家参考,具体内容如下 直接上代码 一.template代码 // 这是单独的组件 <template> <el-breadcrumb separator-class="el-icon-arrow-right"> // 首页我是写死的,其他的遍历出来 <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item

  • vue实现动态面包屑导航

    本文实例为大家分享了vue实现动态面包屑导航的具体代码,供大家参考,具体内容如下 动态面包屑导航是根据路由中的 matched 获取到的单独提取出面包屑导航栏组件 <template>   <el-breadcrumb class="app-breadcrumb" separator="/">     <transition-group name="breadcrumb">       <el-bread

  • vue 面包屑导航组件封装

    目录 一.为什么需要面包屑? 二.初级封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足 三.进阶封装 1. 实现思路 2. 代码演示 3. 使用 4. 不足 四.高阶封装 1. 思路 2. 代码演示 3. 使用 面包屑导航可以将浏览过的页面记录下来,方便很快速的跳转回某一个页面,本文介绍了几种自己封装面包屑组件的方式. 一.为什么需要面包屑? 当网页进行了多次跳转后,用户可能早就已经晕头转向了.作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置,终归网页是要展示给用户.

  • vue 封装面包屑组件教程

    我看过一篇关于程序员写博客的文章,他说很多的程序员过了两年写了很多的代码,但是回想起来自己具体做了哪些技术点,遇到坑几乎没有印象,所以说文字是记录的最好方式,好记性不如烂笔头,可以方便自己以后查看,在写的过程中也会再加深一遍印象,我也来折腾折腾. 第一次写文章就写一个比较有意义的吧,18年四月末来到目前所在的这家公司,熟悉了一周环境和代码后,新的任务就是使用vue+element-ui来重构之前老版本的项目,我主要负责就是用户管理的一个模块,因为之前没有用过vue所以恶补了一周的vue了解了一些

  • Vue2+element-ui实现面包屑导航

    本文实例为大家分享了Vue2+element-ui实现面包屑导航的具体代码,供大家参考,具体内容如下 1.面包屑导航栏布局 代码: <template>     <!--面包屑导航页签-->     <div style="padding: 25px 0;flex: 1">         <el-breadcrumb separator-class="el-icon-arrow-right">            

随机推荐