溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用Element Breadcrumb面包屑

發(fā)布時間：2020-07-27 13:55:22 來源：億速云 閱讀：1222 作者：小豬 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了如何使用Element Breadcrumb面包屑，內(nèi)容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

組件— 面包屑

什么是面包屑導航

一般頁面內(nèi)容上方都會有一個路徑導航，這個導航就是面包屑導航。例如：

如何使用Element Breadcrumb面包屑

上面這個圖表示我們當前的頁面是Breadcrumb面包屑，上一級目錄是組件頁面，再上一級目錄是Element UI頁面。當我們點擊這些目錄時會返回到對應的頁面中去。再例如：

如何使用Element Breadcrumb面包屑

上面這個圖表示我們當前所在的位置是活動詳情頁面，上一級目錄是活動列表頁面…以此類推。
這些就是面包屑導航。

基礎(chǔ)用法

如何使用Element Breadcrumb面包屑

<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>

圖標分隔符

如何使用Element 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

如何使用Element Breadcrumb面包屑

Breadcrumb Item Attributes

如何使用Element Breadcrumb面包屑

以上就是關(guān)于如何使用Element Breadcrumb面包屑的內(nèi)容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手