要使用VUE路由器在VUE中實現(xiàn)麵包屑，請用麵包屑標(biāo)籤定義元路線，創(chuàng)建可重複使用的組件，以從$ Route.Matched.Matched。並應(yīng)用樣式和可訪問性注意事項。 1。在元字段中定義每個路線的麵包板標(biāo)籤，支持靜態(tài)字符串或動態(tài)功能。 2。創(chuàng)建一個麵包屑。為基於定義的麵包屑過濾和地圖匹配路線的vue組件。 3。通過使用當(dāng)前路由執(zhí)行該功能來更新計算屬性以處理動態(tài)麵包屑值。 4。使用CSS水平造型麵包屑。 5。通過使用aria-label使用來確?？稍L問性，避免使用當(dāng)前頁面的鏈接，並使用可選功能（例如工具提示，圖標(biāo)和嵌套路由處理）提高可用性。

麵包屑是向用戶展示其當(dāng)前位置在應(yīng)用程序?qū)Ш綄哟谓Y(jié)構(gòu)中的好方法。在VUE中，將麵包屑與VUE路由器相結(jié)合，可以輕鬆根據(jù)當(dāng)前路線動態(tài)生成步道。這是您可以做到的。

帶有VUE路由器的基本設(shè)置

要創(chuàng)建麵包屑組件，您首先需要正確設(shè)置VUE路由器。關(guān)鍵是為包括breadcrumb標(biāo)籤的每條路線定義元信息。這有助於動態(tài)生成麵包板小徑。

這是路由配置的示例：

 const路由= [
  {
    小路： '/'，
    名稱：“家”，
    組件：家庭視圖，
    meta：{breadcrumb：'home'}
  }，，
  {
    路徑：'/products'，
    名稱：“產(chǎn)品”，
    組件：productsview，
    meta：{breadcrumb：'products'}
  }，，
  {
    路徑：'/products/：id'，
    名稱：“ productDetail”，
    組件：ProductDetailView，
    meta：{breadcrumb ：（路由）=>`product $ {route.params.id}`}
  }
這是給出的

麵包屑值可以是接收路由對象的字符串或函數(shù)，允許諸如產(chǎn)品ID之類的動態(tài)值。

渲染麵包屑小徑

設(shè)置路線後，您可以創(chuàng)建一個可重複使用的Breadcrumb.vue 。從$route.matched

這是一個基本版本：

 <模板>
  <nav class =“ breadcrumb”>
    <ul>
      <li v-for =“（路由，索引）中的MatchedRoutes”：key =“ index”>
        <路由器 - 鏈接：to =“ rout.path”> {{route.meta.breadcrumb}}} </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
導(dǎo)出默認(rèn){
  計算：{
    matchedRoutes（）{
      返回此。
    }
  }
}
</script>

該組件在沒有麵包屑定義的情況下濾除了所有路線，並將其作為鏈接列表。

如果要處理動態(tài)麵包屑標(biāo)籤（例如使用功能的標(biāo)籤），請更新類似的計算屬性：

 matchedRoutes（）{
  返回此。 $ ROUTE.Matched
    .filter（路由=> rout.meta && route.meta.meta.breadcrumb）
    .map（route => {
      const backcrumb = typeof oute.meta.breadcrumb ==='函數(shù)'
        ？路由。 meta.Breadcrumb（路線）
        ：route.meta.breadcrumb
      返回{...路線，麵包屑}
    }））
}

現(xiàn)在，您可以在模板中使用{{ route.breadcrumb }} 。

樣式和可訪問性

當(dāng)用分離器水平造型時，麵包屑通?？雌饋碜詈?。您可以使用這樣的簡單CS：

 .breadcrumb ul {
  顯示：Flex;
  列表風(fēng)格：無；
  填充：0;
}

.breadcrumb li :: {
  內(nèi)容： ” / ”;
  填充：0 5px;
  顏色：＃666;
}

另外，不要忘記可訪問性：

• 使用<nav></nav>因此屏幕讀取器知道它是導(dǎo)航
• 將aria-label="Breadcrumb"添加到導(dǎo)航元素
• 避免將最後一個項目作為鏈接，因為它代表當(dāng)前頁面

您可以有條件地將類添加到最後一項，或者在需要時禁用鏈接。

可選的增強(qiáng)功能

• 在懸停路徑上顯示一個工具提示
• 通過應(yīng)用不同的樣式突出顯示當(dāng)前頁面
• 在項目之間添加圖標(biāo)以更好地視覺分離
• 優(yōu)雅地處理深度嵌套的路線

這些小的觸摸可改善可用性，而不會使事情變得過多複雜。

基本上就是這樣 - 並不復(fù)雜，但一旦實施就非常有用。只需幾行代碼和一些周到的樣式，您就可以使您的Vue應(yīng)用程序感覺更加精緻和用戶友好。

以上是帶有Vue路由器的麵包屑組件的示例的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！