Element Breadcrumb 面包屑的使用方法
組件— 面包屑
什么是面包屑導(dǎo)航
一般頁(yè)面內(nèi)容上方都會(huì)有一個(gè)路徑導(dǎo)航，這個(gè)導(dǎo)航就是面包屑導(dǎo)航。例如：
上面這個(gè)圖表示我們當(dāng)前的頁(yè)面是Breadcrumb面包屑，上一級(jí)目錄是組件頁(yè)面，再上一級(jí)目錄是Element UI頁(yè)面。當(dāng)我們點(diǎn)擊這些目錄時(shí)會(huì)返回到對(duì)應(yīng)的頁(yè)面中去。再例如：
上面這個(gè)圖表示我們當(dāng)前所在的位置是活動(dòng)詳情頁(yè)面，上一級(jí)目錄是活動(dòng)列表頁(yè)面…以此類(lèi)推。
這些就是面包屑導(dǎo)航。
基礎(chǔ)用法
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首頁(yè)</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: '/' }">首頁(yè)</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)文章
在微信小程序中，可以使用全局配置和使用開(kāi)發(fā)、體驗(yàn)、生產(chǎn)環(huán)境的地址，這篇文章主要介紹了Vue微信和uniapp配置環(huán)境地址,需要的朋友可以參考下2023-07-07
基于element-ui表格的二次封裝實(shí)現(xiàn)
本文主要介紹了基于element-ui表格的二次封裝實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue-router如何實(shí)現(xiàn)路由懶加載
在現(xiàn)代前端開(kāi)發(fā)中,Vue.js憑借其輕量級(jí)和易用性,成為了很多開(kāi)發(fā)者的首選框架,本文將結(jié)合實(shí)際案例,詳細(xì)講解Vue-Router路由懶加載的用法,需要的可以參考下2024-11-11
ElementPlus?Table表格實(shí)現(xiàn)可編輯單元格
本文主要介紹了ElementPlus?Table表格實(shí)現(xiàn)可編輯單元格,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
這篇文章主要介紹了vue-cli在 history模式下的配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue-cli3.0如何修改端口號(hào)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
推薦一款簡(jiǎn)易的solid?js消息UI庫(kù)使用詳解
這篇文章主要為大家介紹了推薦一款簡(jiǎn)易的solid-js消息UI庫(kù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue.js模仿京東省市區(qū)三級(jí)聯(lián)動(dòng)的選擇組件實(shí)例代碼
選擇省市區(qū)是我們大家在填寫(xiě)地址的時(shí)候經(jīng)常會(huì)遇到的一個(gè)功能，下面這篇文章主要給大家介紹了關(guān)于利用vue.js模仿實(shí)現(xiàn)京東省市區(qū)三級(jí)聯(lián)動(dòng)選擇組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-11-11
解決vue的過(guò)渡動(dòng)畫(huà)無(wú)法正常實(shí)現(xiàn)問(wèn)題
今天小編就為大家分享一篇解決vue的過(guò)渡動(dòng)畫(huà)無(wú)法正常實(shí)現(xiàn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
我們?cè)谄綍r(shí)上網(wǎng)的時(shí)候會(huì)看到有些圖片是加水印的,一般水印往往是后端來(lái)做的,不過(guò)有些站點(diǎn)要保護(hù)的知識(shí)產(chǎn)權(quán)類(lèi)型比較多,不光是圖片,可能還有視頻或者文字,所以我們水印的作用,就是給他做一個(gè)適當(dāng)?shù)南拗?本文就給大家介紹一下如何使用Vue實(shí)現(xiàn)防篡改的水印2023-08-08