精华内容
下载资源
问答
  • 今天小编就为大家分享一篇VUE+elementui面包屑实现动态路由详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 目录官方地址基本使用图标分隔符Breadcrumb 属性Breadcrumb-Item属性 官方地址 ...基本使用 <el-breadcrumb></el-breadbcrumb> <el-breadcrumb-item></el-breadcrumb-...

    官方地址

    https://element.eleme.io/#/zh-CN/component/breadcrumb

    基本使用

    <el-breadcrumb></el-breadbcrumb>
    <el-breadcrumb-item></el-breadcrumb-item>

      <el-breadcrumb separator="/">
    	<el-breadcrumb-item :to="{path: '/'}" :replace="true">首页</el-breadcrumb-item>
    	<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
    	<el-breadcrumb-item>活动列表</el-breadcrumb-item>
    	<el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    

    图标分隔符

      <h1>图标分隔符</h1>
      <el-breadcrumb separator-clas="el-icon-arrow-right">
    	  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    	  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    	  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    	  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    

    Breadcrumb 属性

    参数说明类型可选值默认值
    to路由跳转对象,同 vue-routertostring/object
    replace在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录booleanfalse

    Breadcrumb-Item属性

    参数说明类型可选值默认值
    to路由跳转对象,同 vue-routertostring/object
    replace在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录booleanfalse
    展开全文
  • 今天小编就为大家分享一篇vue+elementUI动态生成面包屑导航教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用官方组件el-breadcrumb-item 代码如下 <p><img alt="" height="215" src="https://img-ask.csdnimg.cn/upload/1607308942726.png" width="1153" /></p> 原地址(正确的地址): ... </p>
  • 层级较多有十级左右,所以需要面包屑的展示; 本文章主要就项目中面包屑封装做一个总结; 1.路由配置文件 面包屑时根据vue-router的路由循环生成;所以想要展示的面包屑有多少层级,路由就有多少层级 路由层级...

    一般项目的菜单只有两级菜单,但是现在做的项目中有三级菜单;
    对应的第三级菜单下还有新增编辑和详情页面;
    层级较多有十级左右,所以需要面包屑的展示;
    本文章主要就项目中面包屑封装做一个总结;

    1.路由配置文件

    面包屑时根据vue-router的路由循环生成;所以想要展示的面包屑有多少层级,路由就有多少层级

    路由层级(三级菜单)

    每级都要有component,component对应页面要有对应的router-view, 否则会出出现公共部分没有内容的问题;
    子级菜单会展示上级的component页面内容;所以是公共部分;但是第三级页面和详情页面因为没有什么公共部分,做了判断处理

    export const routeMap =[
      // 1
      {
        path: '/',
        name: 'service',
        redirect: '/service/node-service/s2service',
        meta: { title: '1', keepAlive: true, icon: 'table', permission: [ 'dashboard' ] },
        component: Menu,
        children: [
          // 1-1
          {
            path: '/service/node-service',
            name: 'nodeService',
            meta: { title: '1-1', keepAlive: false, permission: [ 'dashboard' ] },
            component: Base,
            children: [
              {
                path: '/service/node-service/s2service',
                name: 's2service',
                component: () => import('@/modules/region/index.vue'),
                meta: { title: '1-2', permission: [ 'table' ] }
              },
            ]
          },
        ]
      },
    
      // 2
      {
        path: '/resources',
        name: 'resources',
        redirect: '/resources/resources-pool',
        meta: { title: '2', keepAlive: true, icon: 'table', permission: [ 'dashboard' ] },
        component: Menu,
        children: [
          // 2-1
          {
            path: '/resources/network',
            name: 'network',
            redirect: '/resources/network/vpc',
            component: Base,
            meta: { title: '2-1', icon: "el-icon-connection", keepAlive: false, permission: [ 'dashboard' ] },
            children: [
              {
                path: '/resources/network/subnet_ip_pool',
                name: 'subnetIpPool',
                component: () => import('@/modules/subnet_ip_pool/index.vue'),
                meta: { title: '2-1-1', permission: [ 'table' ] },
                hideChildrenMenu: true,
                children:[
                  {
                    path: '/resources/network/subnet_ip_pool/add',
                    name: 'ipPoolAdd',
                    component: () => import('@/modules/subnet_ip_pool/add.vue'),
                    meta: { title: '添加2-1-1', permission: [ 'table' ] },
                  },
                  {
                    path: '/resources/network/subnet_ip_pool/edit',
                    name: 'ipPoolEdit',
                    component: () => import('@/modules/subnet_ip_pool/add.vue'),
                    meta: { title: '编辑2-1-1', permission: [ 'table' ] },
                  },
                  {
                    path: '/resources/network/subnet_ip_pool/detail/:id',
                    name: 'ipPoolEdit',
                    component: () => import('@/modules/subnet_ip_pool/detail.vue'),
                    meta: { title: '子网2-1-1', permission: [ 'table' ] },
                  },
                ]
              },
            ]
          },
        ]
      },
    ]

    component Menu

    Menu是基本页面布局,header和menu
    这个页面需要一个router-view展示其他公共的部分

    component Base

    Base是每个页面公共组件,比如每个页面都有一个共同的面包屑

    component 详情的上级页面

    这里是踩坑点:详情的上级是有内容的,所以对于它的详情页面会用上一级的component
    页面添加判断来展示router-view

    <template>
      <div title="router1" v-if="router.name='router1'"></div>
      <router-view v-else></router-view>
    </template>

    2.菜单渲染递归组件的封装

    有多级菜单,所以菜单渲染需要递归

    菜单渲染页面

    <template>
      <el-aside>
        <el-menu
          :default-openeds="open_list"
          router
          text-color="#444"
          active-text-color="#0086F4"
          :default-active="activeMenu"
          :collapse="isCollapse"
          :unique-opened="true"
          mode="vertical"
        >
          <sidebar-item v-for="route in menus" :key="route.path" :item="route" />
        </el-menu>
      </el-aside>
    </template>
    <template>
      <div v-if="!item.hidden">
        <el-menu-item 
         v-if="!item.children || item.hideChildrenMenu"
         :index="item.path" 
         :key="item.path"
         :class="{'is-active': $route.path.includes(`${item.path}_`),'no-active': !$route.path.includes(`${item.path}_`)}"
        >
          <item :icon="item.meta.icon||(item.meta&&item.meta.icon)" :title="item.meta.title" />
        </el-menu-item>
        <el-submenu 
          v-else-if='!item.hideMenu' ref="subMenu" 
          :index="item.path" 
          popper-append-to-body
          >
          <template slot="title">
            <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
          </template>
          <sidebar-item
            v-for="child in item.children"
            :key="child.path"
            :is-nest="true"
            :item="child"
            :base-path="child.path"
            class="nest-menu"
          />
        </el-submenu>
      </div>
    </template>

    3.面包屑的封装

    <script>
    export default {
      data () {
        return {
          name: '',
          breadList: []
        }
      },
      created () {
        this.getBreadcrumb()
      },
      methods: {
        getBreadcrumb () {
          this.breadList = []
          this.name = this.$route.name
          this.$route.matched.forEach(item => {
            this.breadList.push(item)
          })
        }
      },
      watch: {
        $route () {
          this.getBreadcrumb()
        }
      }
    }
    </script>

    渲染页面

    <template>
     <div>
      <el-breadcrumb class="breadcrumb" separator="/">
       <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
          <router-link
            v-if="item.name != name && index != 0 && index != 1"
            :to="{ path: item.path === '' ? '/' : item.path }"
          >{{ item.meta.title }}</router-link>
          <span v-else>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <router-view></router-view>
     </div>
    </template>

    获取面包屑列表

    <script>
    export default {
      data () {
        return {
          name: '',
          breadList: []
        }
      },
      created () {
        this.getBreadcrumb()
      },
      methods: {
        getBreadcrumb () {
          this.breadList = []
          this.name = this.$route.name
          this.$route.matched.forEach(item => {
            this.breadList.push(item)
          })
        }
      },
      watch: {
        $route () {
          this.getBreadcrumb()
        }
      }
    }
    </script>

     

    展开全文
  • vue+elementUI面包屑组件封装

    千次阅读 2019-10-16 11:02:10
    1.选择用哪种样式 2.在组件文件夹下创建组件 3.在Bread.vue复制如下...-- 面包屑 --> <div class="bread"> <el-breadcrumb separator-class="el-icon-arrow-right"> <!-- <el-breadcrumb-...

    一.选择用哪种样式

    在这里插入图片描述

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

    在这里插入图片描述

    三.在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'
            }
          ] // 面包屑数据
        }
      }
    }
    

    效果如图:
    在这里插入图片描述

    展开全文
  • elementui面包屑动态生成

    千次阅读 2020-03-26 16:31:15
    tamplate模板中 <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="(item,index) in list" :key="index" :to="{path:item.path}"> {{item.name}} </el-bre...

    tamplate模板中

        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item,index) in list" :key="index" :to="{path:item.path}"> 
                 {{item.name}} 
            </el-breadcrumb-item>
        </el-breadcrumb>
    

    script标签中

    export default {
        data() {
            return {
                list:[]
            }
        },
        watch:{
            $route(){
                this.bread();
            }
        },
        methods:{
            bread(){
            
                let matched = this.$route.matched.filter(item=>item.name);
                let first = matched[0];
                
                if(first&&first.name!=='首页'){    // 我在这里是判断的是name,渲染的是name,但是可以使用其他的字段
                    matched = [{path:"/home",name:"首页"}].concat(matched);
                }
                
                this.list = matched;
            }
        },
        created(){
          this.bread();
        }
      };
    

    路由中

    const routes = [{
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: Home,
            name: '首页',
            meta:{
                 title : "首页"   //  这里可以这样写,判断和渲染这个字段,看个人写法
            }
        },
        {
            path: '/login',
            component: Login,
            name: "登录页"
        },
        {
            path: '/shop',
            component: Shop,
            name: "商品管理"
        },
        {
            path: '/order',
            component: Order,
            name: "订单管理"
        }
    ];
    
    展开全文
  • 主要为大家详细介绍了vue element-ui实现动态面包屑导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • VUE+elementui面包屑实现动态路由

    万次阅读 多人点赞 2018-09-11 14:14:40
    我的路由: const routerMap = [ { path : '/' , redirect : 'dashboard' , component : Layout, name : 'Dashboard' ...面包屑代码: ...通过监听当前路由的变化,动态更新面包屑的内容。
  • <el-breadcrumb :separator-class="separatorIcon"> <el-breadcrumb-item v-for="(item, index) in breadCrumbList" :key="index" :to="item.path ? { path: item.path } : ''" @click.native=...
  • 面包屑组件中使用 {{ item.meta.title }} // 可以在mounted里打印当前路由信息查看 一目了然 mounted() { console.log(this.$route); } // 使用计算属性把当前路由信息中需要的数据返回 然后使用v-for进行循环遍历...
  • 使用场景:点击资源列表中的某一行,可以跳转到该行详情,涉及层级关系,考虑用面包屑导航,为了防止面包屑导航在页面刷新时不存在,考虑监听路由参数的变化 分析:假设面包屑导航的名字为 :全部 > test1 > ...
  • 1、修改面包屑文字大小 ::v-deep { .el-breadcrumb__item { font-size: 35px; } } 2、修改面包屑文字颜色 .el-breadcrumb ::v-deep .el-breadcrumb__inner {         ...
  • Vue + elementUI实现动态面包屑

    千次阅读 2020-10-15 09:51:48
    } ] } ] } } ElementUI面包屑: 首页 {{item.title}} computed计算属性: computed: { // 动态面包屑 breadcrumbList() { let breadcrumbs = [] // 获取的菜单列表 let menuList = this.menuList // 获取...
  • vue使用elementUI组件做面包屑

    千次阅读 2020-07-03 10:21:16
    3. 要使用面包屑的页面加入面包屑组件并使用 4.在导航菜单栏上绑定动态路由 <el-col :span="5" id="side-menu"> $route.path" class="el-menu-vertical-demo"> <el-menu-item index="/"> <span slot="title"> ...
  • 基础小白的文章 1、实现 引入el-breadCrumb组件: data()中的内容 ...但是存在一个问题:当页面舒心的时候,面包屑就消失了.... 遇见问题,尝试解决。 2、优化 首先尝试将breadList中的数据...
  • vue + element 动态面包屑

    千次阅读 2019-10-10 14:59:45
    两种思路 1 平级路由,通过添加meta来做面包屑 2 嵌套路由,通过新增router-view...面包屑采用elementui的组件,单独提取出来 // breadcrumbList 为在store中存储的面包屑数据 <template> <div clas...
  • 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.n...
  • vue+elementUI动态生成面包屑导航

    千次阅读 2019-09-27 10:00:01
    项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示 <el-menu :unique-opened="true" router :default-active="$route.path" @select="handleSelect"> <div class="user-menu-box" v-for="menu ...
  • 一、需求 我们在前端开发中,难免遇到按照设计图来搭建页面...- 面包屑演示 <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item class="myColor">第一层</el-breadcrumb-item&
  • vue-cli项目中—根据路由变换的动态面包屑导航 1、在src文件夹下的router/index.js中配置路由 const routerMap = [ { path: '/', redirect: 'dashboard', component: Layout, name:'Dashboard', ch...
  • vue+element-ui面包屑导航

    千次阅读 2019-08-31 15:07:05
    vue+element-ui面包屑导航 所需组件及引入文件 (npm、elelment-ui等基础安装在此不做介绍) 如同上一篇( vue&Element-ui实现的导航菜单)中介绍,需要布局layout公共组件,路由配置文件,此篇中路由配置文件...
  • 效果展示: 实现的思路 需要在路由的meta中设置breadNumber字段,‘一级页面’不设置breadNumber(因为大部分页面是一级页面,所以就不设置了~),‘二级页面’设置...在面包屑的页面监听路由,路由变化时则触发面包
  • vue+ elementui 实现面包屑的多级嵌套

    千次阅读 2018-11-19 12:12:04
    最近有个功能是将原有两级的面包屑修改为多级, 刚开始的时候,想着把之后多级的地址放到vuex中,但是 这样在页面刷新的时候,值或许会刷新,并且,每个页面都要加一个commit,感觉比较繁琐,同样的localStorage也要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 563
精华内容 225
关键字:

elementui面包屑