Breadcrumb

介紹使用 Breadcrumb 麵包屑元件

Breadcrumb,也就是俗稱的「麵包屑」,就如「糖果屋」故事裡為了怕迷路而撒下的麵包屑,在網頁裡,使用者有時候會突然忘記自己在哪個層級的頁面裡,這時候 Breadcrumb 就會發揮它的作用,指出方向讓使用者知道自己的方位。

範例

<bpa-breadcrumb :key="$route.path">
  <bpa-breadcrumb-item
    v-for="(pathItem, pathIndex) in path"
    :key="`pathIndex-${pathIndex}`"
    :title="`goto${pathItem.title}`"
    :to="pathItem.url"
  >
    {{ pathItem.title }}
  </bpa-breadcrumb-item>
</bpa-breadcrumb>

屬性

名稱ValueTypeDefault ValueRequired描述
to{ url path }Vue Route
title{ url path }String✔️
bpa-breadcrumb-item Props

演示