Breadcrumb 麵包屑

顯示使用者目前在網站層級中的位置,並提供逐層返回的路徑。使用 Element Plus 的 el-breadcrumb。

設計準則

• 只用來表示「層級位置」,不是操作列;每一層對應一個真實的頁面層級
• 最後一層是目前頁面,固定不可點(不給 to);前面各層都可點擊回上層
• 分隔符全產品統一:預設用 /;需要更明確的方向感時用箭頭圖示(separator-icon)。同一個產品只選一種,不要混用
• 放在頁面標題上方,層級建議 不超過 4 層;過深的路徑用「⋯」收合中間層
• 文字用該層頁面的正式名稱,與側欄選單、頁面標題一致

基本用法(文字分隔符)

loading

自訂文字分隔符

loading

圖示分隔符

用 separator-icon 換成箭頭圖示,方向感更明確。這裡用 Font Awesome 的 fa-angle-right。

loading

搭配路由跳轉

前面各層用 to 綁定路徑即可點擊跳轉;最後一層(目前頁面)不給 to。

loading

Do / Don't

✅ Do	❌ Don't
最後一層固定不可點	目前頁面還做成連結
全產品統一一種分隔符	這頁 / 那頁箭頭
層級文字與側欄／標題一致	麵包屑寫簡稱、標題寫全名
層級 ≤ 4,過深收合	一路展開七八層

給工程師

• 各層可點跳轉用 el-breadcrumb-item 的 to(等同 vue-router 的 to);加 replace 則不留歷史紀錄
• separator-icon 接受一個 Vue 元件,包一層 Font Awesome 圖示即可(見範例)
• 完整 API 見 Element Plus Breadcrumb 文件。本站規範優先於 EP 文件中的視覺建議。