Element Breadcrumb 面包屑的使用方法
更新時(shí)間：2020年07月26日 16:51:41 作者：ForeverJPB.
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
組件— 面包屑
什么是面包屑導(dǎo)航
一般頁面內(nèi)容上方都會(huì)有一個(gè)路徑導(dǎo)航，這個(gè)導(dǎo)航就是面包屑導(dǎo)航。例如：
上面這個(gè)圖表示我們當(dāng)前的頁面是Breadcrumb面包屑，上一級(jí)目錄是組件頁面，再上一級(jí)目錄是Element UI頁面。當(dāng)我們點(diǎn)擊這些目錄時(shí)會(huì)返回到對(duì)應(yīng)的頁面中去。再例如：
上面這個(gè)圖表示我們當(dāng)前所在的位置是活動(dòng)詳情頁面，上一級(jí)目錄是活動(dòng)列表頁面…以此類推。
這些就是面包屑導(dǎo)航。
基礎(chǔ)用法
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item><a href="/" rel="external nofollow" >活動(dòng)管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)列表</el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)詳情</el-breadcrumb-item>
</el-breadcrumb>
圖標(biāo)分隔符
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)管理</el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)列表</el-breadcrumb-item>
<el-breadcrumb-item>活動(dòng)詳情</el-breadcrumb-item>
</el-breadcrumb>
Breadcrumb Attributes
Breadcrumb Item Attributes
到此這篇關(guān)于Element Breadcrumb 面包屑的使用方法的文章就介紹到這了,更多相關(guān)Element Breadcrumb 面包屑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章給大家介紹了vue中本地靜態(tài)圖片路徑寫法及Vue.js中引用圖片路徑的方式，需要的朋友參考下吧2018-03-03
Vue中路由參數(shù)與查詢參數(shù)傳遞對(duì)比解析
在Vue.js中，路由與導(dǎo)航不僅涉及頁面切換，還包括了向頁面?zhèn)鬟f參數(shù)和獲取查詢參數(shù)，這篇文章主要介紹了Vue路由參數(shù)與查詢參數(shù)傳遞,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了vue-axios使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
vue+elementui 實(shí)現(xiàn)新增和修改共用一個(gè)彈框的完整代碼
Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架，手機(jī)端有對(duì)應(yīng)框架是Mint UI ，今天給大家普及vue+elementui 實(shí)現(xiàn)新增和修改共用一個(gè)彈框的完整代碼，一起看看吧2021-06-06
這篇文章主要介紹了解讀Vue-loader的相關(guān)知識(shí)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
使用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果
這篇文章主要介紹了用Vue-Awesome-Swiper實(shí)現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值需要的朋友可以參考下2019-08-08
這篇文章較詳細(xì)的給大家介紹了vue組件之間傳值的方法，在 Vue 中，可以使用props向子組件傳遞數(shù)據(jù)。具體傳遞方法大家跟隨腳本之家小編一起看看吧2018-08-08
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue.js el-table動(dòng)態(tài)單元格列合并方式
這篇文章主要介紹了vue.js el-table動(dòng)態(tài)單元格列合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08