1. Breadcrumb面包屑

1.1. Breadcrumb面包屑顯示當前頁面的路徑, 快速返回之前的任意頁面。

1.2. Breadcrumb Attributes

參數	說明	類型	默認值
separator	分隔符	string	斜杠'/'
separator-class	圖標分隔符class	string	無

1.3. Breadcrumb Item Attributes

參數	說明	類型	默認值
to	路由跳轉對象, 同vue-router的to	string/object	無
replace	在使用to進行路由跳轉時, 啟用replace將不會向history添加新記錄	boolean	false

2. Breadcrumb面包屑例子

2.1. 使用腳手架新建一個名為element-ui-breadcrumb的前端項目, 同時安裝Element插件。

2.2. 在components下創建Breadcrumb.vue?

<template><div><h1>基礎用法-適用廣泛的基礎用法</h1><h4>在el-breadcrumb中使用el-breadcrumb-item標簽表示從首頁開始的每一級。Element提供了一個separator屬性, 在el-breadcrumb標簽中設置它來決定分隔符, 它只能是字符串, 默認為斜杠/。</h4><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item><el-breadcrumb-item><a href="/">活動管理</a></el-breadcrumb-item><el-breadcrumb-item>活動列表</el-breadcrumb-item><el-breadcrumb-item>活動詳情</el-breadcrumb-item></el-breadcrumb><h1>圖標分隔符</h1><h4>通過設置separator-class可使用相應的iconfont作為分隔符, 注意這將使separator設置失效。</h4><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></div> </template>

2.3. 運行項目, 訪問http://localhost:8080/#/Breadcrumb

總結

以上是生活随笔為你收集整理的035_Breadcrumb面包屑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。