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