Element Breadcrumb 面包屑的使用方法

组件— 面包屑

什么是面包屑导航

一般页面内容上方都会有一个路径导航，这个导航就是面包屑导航。例如：

上面这个图表示我们当前的页面是Breadcrumb面包屑，上一级目录是组件页面，再上一级目录是Element UI页面。当我们点击这些目录时会返回到对应的页面中去。再例如：

上面这个图表示我们当前所在的位置是活动详情页面，上一级目录是活动列表页面…以此类推。
这些就是面包屑导航。

基础用法

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

图标分隔符

<el-breadcrumb separator-class="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 Attributes

Breadcrumb Item Attributes

到此这篇关于Element Breadcrumb 面包屑的使用方法的文章就介绍到这了,更多相关Element Breadcrumb 面包屑内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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+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 element-ui实现动态面包屑导航

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

  • 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

  • Element Breadcrumb 面包屑的使用方法

    组件- 面包屑 什么是面包屑导航 一般页面内容上方都会有一个路径导航,这个导航就是面包屑导航.例如: 上面这个图表示我们当前的页面是Breadcrumb面包屑,上一级目录是组件页面,再上一级目录是Element UI页面.当我们点击这些目录时会返回到对应的页面中去.再例如: 上面这个图表示我们当前所在的位置是活动详情页面,上一级目录是活动列表页面-以此类推. 这些就是面包屑导航. 基础用法 <el-breadcrumb separator="/"> <el-bread

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

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

    本文实例为大家分享了vue+elementUI面包屑组件封装的具体代码,供大家参考,具体内容如下 一.选择用哪种样式 二.在组件文件夹下创建组件 三.在Bread.vue复制如下代码 <template>   <!-- 面包屑 -->   <div class="bread">  <el-breadcrumb separator-class="el-icon-arrow-right">  <el-breadcru

  • vue实现面包屑的方法

    vue实现面包屑的方法

    vue中面包屑的实现方法,供大家参考,具体内容如下 面包屑是什么: 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点. 最常见的面包屑的样式是:横向的文字链接,由大于号“>”分开,这个符号也暗示了它们的层级关系 实现原理: 1.在router配置中加入meta(元数据)对象,存放一些自定义的内容.例如在面包屑的实现中加入title变量,这个变量则是面包屑展示出来的多级标题. 2.在用到面包屑

  • 为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置

    公司项目的面包屑导航是使用 element 的面包屑组件,配合一份 json 配置文件来实现的,每次写新页面都需要去写 json 配置,非常麻烦,所以写一个面包屑cli,自动生成页面.自动配置面包屑数据,提高效率:rocket: 明确目标 提供 init 命令,在一个新项目中能够通过初始化生成面包屑相关文件 能够通过命令生成页面,并且自动配置面包屑 json 数据 按照项目原有需求,能够配置面包屑是否可点击跳转 按照项目原有需求,能够配置某路径下是否展示面包屑 支持仅配置而不生成文件,能够为已存

  • php实现面包屑导航例子分享

    php实现面包屑导航例子分享

    本实例讲解了php实现面包屑导航的方法,面包屑导航在项目非常实用,在此处就写一个这方面的实现. path表示所有的祖先id,fullpath表示所有的祖先id和本身id -- -- 表的结构 `tp_likecate` -- CREATE TABLE IF NOT EXISTS `tp_likecate` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `catename` varchar(24) NOT NULL, `path` varchar

  • vue基础之面包屑和标签tag详解

    vue基础之面包屑和标签tag详解

    目录 面包屑导航(breadcrumb) 标签(tag) 1.在main.js中引用tag 2.在页面或组件中使用tag 3.Tag的属性 4.Tag的事件有两个,点击和关闭 总结 面包屑导航(breadcrumb) 面包屑导航显示当前页面的路径,同时支持跳回之前任意页面 breadcrumb的使用: 按需引入的需要引入两个模块:Breadcrumb.BreadcrumbItem,在main.js中 // main.js import {Breadcrumb, BreadcrumbItem} f

  • vue.js实现动态面包屑

    最近在学习vue,正好手上有个项目还是用jquery写的,就自己尝试将这个项目的前端用vue实现,途中遇到了动态面包屑的问题,特此记录一下,如有不对的地方,欢迎指正. 需求描述: 点击左侧的导航,跳转到不同的页面,并且根据导航的路径,动态生成面包屑.面包屑的数据均来自于左侧的导航. 思路: 1.面包屑作为一个单独的组件,在页面中引入.页面的结构如下: <template>     <div class="page-center">         <top

  • bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    本文实例讲述了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法.分享给大家供大家参考,具体如下: Bootstrap官网中,只介绍了breadcrumb的布局(如下图),未介绍使用方法,如何动态增加面包屑title及点击事件的响应. 本人在使用过程中探索出以下的方式. 首先,在html文件里定义div <div> <ul class="breadcrumb " style="margin-bottom:0px;visibility:

  • 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动态面包屑功能的实现方法

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

随机推荐