ElementUI 面包屑導航元件

目錄

• 官方位址
• 基本使用
• 圖示分隔符
• Breadcrumb 屬性
• Breadcrumb-Item屬性

官方位址

https://element.eleme.io/#/zh-CN/component/breadcrumb

基本使用

<el-breadcrumb></el-breadbcrumb>

<el-breadcrumb-item></el-breadcrumb-item>

<el-breadcrumb separator="/">
	<el-breadcrumb-item :to="{path: '/'}" :replace="true">首頁</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>
  <el-breadcrumb separator-clas="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 屬性

參數	說明	類型	可選值	預設值
to	路由跳轉對象，同 vue-router 的 to	string/object	—	—
replace	在使用 to 進行路由跳轉時，啟用 replace 将不會向 history 添加新記錄	boolean	—	false

Breadcrumb-Item屬性

參數	說明	類型	可選值	預設值
to	路由跳轉對象，同 vue-router 的 to	string/object	—	—
replace	在使用 to 進行路由跳轉時，啟用 replace 将不會向 history 添加新記錄	boolean	—	false