035_Breadcrumb面包屑

1. Breadcrumb面包屑

1.1. Breadcrumb面包屑显示当前页面的路径, 快速返回之前的任意页面。

1.2. Breadcrumb Attributes

参数	说明	类型	默认值
separator	分隔符	string	斜杠'/'
separator-class	图标分隔符class	string	无

1.3. Breadcrumb Item Attributes

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

2. Breadcrumb面包屑例子

2.1. 使用脚手架新建一个名为element-ui-breadcrumb的前端项目, 同时安装Element插件。

2.2. 在components下创建Breadcrumb.vue

<template><div><h1>基础用法-适用广泛的基础用法</h1><h4>在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element提供了一个separator属性, 在el-breadcrumb标签中设置它来决定分隔符, 它只能是字符串, 默认为斜杠/。</h4><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首页</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><h4>通过设置separator-class可使用相应的iconfont作为分隔符, 注意这将使separator设置失效。</h4><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></div>
</template>

2.3. 运行项目, 访问http://localhost:8080/#/Breadcrumb

035_Breadcrumb面包屑相关推荐

爱上MVC3系列~开发一个站点地图(俗称面包屑)
回到目录原来早在webform控件时代就有了SiteMap这个东西,而进行MVC时代后,我们也希望有这样一个东西,它为我们提供了不少方便,如很方便的实现页面导航的内容修改,页面导航的样式换肤等. 我 ...
改变路径但是不让它跳转_Vue实战047：Breadcrumb面包屑实现导航路径
前言在网站中我们经常看到有个导航路径,可以直观地显示当前页面的路径,并快速返回之前的任意页面.这是一个非常实用的功能,也是在Web前端必备的导航UI之一.今天我们借助el-breadcrumb来快速 ...
浅析面包屑导航对网站SEO优化有哪些作用？
众所周知,每个优化人员都知道面包屑导航对于网站来说是不可或缺的一部分,面包屑导航就是像面包一样一层一层的导航结构.能够更好的帮助用户在栏目页可以返回网站首页或者点击进入下一层内容页面,提升用户体验好感 ...
Php数组面包屑导航,PHP 导航提示（面包屑型轨迹）
导航提示(面包屑型轨迹)为Web用户提供了方便.直观的导航帮助,将用户的当前位置分解为一个超链接路径提供当前文档中网站中相对位置的总揽.总体来说,更加优于浏览器本身提供的导航工具,而且能够补充甚至替代 ...
php递归面包屑,php可应用于面包屑导航的递归寻找家谱树实现方法
本文实例讲述了php可应用于面包屑导航的递归寻找家谱树实现方法.分享给大家供大家参考.具体实现方法如下:<?phpecho " ";$area = array(array(& ...
权限组件（4）：给动态菜单增加面包屑导航
效果图: 一.在初始化权限的时候增加二级菜单的标题和url 这么做是为了在中间件中把二级菜单和具体权限的标题.url都储存起来 rbac/service/init_permission.py from ...
eclipse 面包屑开关 / 查看class再哪个jar中
前言 eclipse Version: 2019-09 R (4.13.0) eclipse面包屑知道这个类是哪个jar里的知道这个类是哪个项目里的面包屑的工具栏按钮面包屑快捷键 ALT+SH ...
react+ant design Breadcrumb面包屑组件
import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...
一行代码搞定WordPress面包屑导航breadcrumb
有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...

035_Breadcrumb面包屑

035_Breadcrumb面包屑相关推荐

最新文章

热门文章