vue+elementUI面包屑组件封装方法详解

本文实例为大家分享了vue+elementUI面包屑组件封装的具体代码，供大家参考，具体内容如下

一.选择用哪种样式

二.在组件文件夹下创建组件

三.在Bread.vue复制如下代码

<template>
  <!-- 面包屑 -->
  <div class="bread">
 <el-breadcrumb separator-class="el-icon-arrow-right">
 <el-breadcrumb-item v-for="(item, index) in fromFather" :key=index :to="{ path: '/' + item.path }">{{item.name}}</el-breadcrumb-item>

</el-breadcrumb>
</div>
</template>

<script>
export default {
   name: 'bread',
   props: ['fromFather']
}
</script>

<style lang="less">
.bread {
    background-color: #fff;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px #EFEFEF solid;
    box-sizing: border-box;
    box-shadow: 1px 2px 4px #BABABA;
    margin-bottom: 36px;
    .el-icon-arrow-right:before {
        color: #000;
    }
    .el-breadcrumb__item {
        font-size: 20px;
        line-height: 50px;
    }
    .el-breadcrumb__inner {
        cursor: pointer !important;
    }
}
</style>

四.在你需要的页面上应用

// html代码
<!-- 面包屑导航 -->
  <Bread :fromFather="dataPath"></Bread>
// js代码
import Bread from '../../../components/Bread.vue'  // 引入面包屑组件

export default {
  name: 'nicklist',
  components: {
    Bread // 注册面包屑组件
  },
  data() {
    return {
      dataPath: [
        {
          name: '课程',   // 名称,自定
          path: 'nicklist'  // 路由导航,自定
        },
        {
          name: '课程管理',
          path: 'nicklist'
        }
      ] // 面包屑数据
    }
  }
}

效果如图:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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+elementui面包屑实现动态路由详解

    我的路由: const routerMap = [ { path: '/', redirect: 'dashboard', component: Layout, name:'Dashboard', children: [ { path: 'dashboard', component: () => import('@/view/dashboard'), name: 'Dashboard', meta: { title: 'dashboard', icon: 'dashboard', noCache

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

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

  • 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

  • Vue动态面包屑功能的实现方法

    面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 Element-UI 进行实现. 最笨的方式 首先我们想到的最笨的方法就是在每个需要面包屑的页面中固定写好. <template> <div class="example-container"> <el-breadcrumb separator="

  • 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动态路由实现多级嵌套面包屑的思路与方法

    前言 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0

  • vue+elementUI实现动态面包屑

    本文实例为大家分享了vue+elementUI实现动态面包屑的具体代码,供大家参考,具体内容如下 引言 后台管理系统中,经常会出现需要面包屑的情况,但是又不想每个页面都实现一个,这样不方便维护,因此封装了面包屑组件,方便在页面使用 封装组件 <!-- Breadcrumb/index.vue -->     <template>   <div>     <el-breadcrumb class="breadcrumb" separator=&q

  • 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

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

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

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

随机推荐