Vue-cli實戰項目14全局面包屑導航開發

上一章節

Vue-cli實戰項目13 分離全局配置

麪包屑導航

使用Element 的 Breadcrumb 麪包屑 組件來實現。
顯示當前頁面的路徑，快速返回之前的任意頁面。
Breadcrumb 麪包屑API

基本實現

<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>

通過路由數據生成

<!-- 麪包屑導航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: item.path }" v-for="(item,index) in bran" :key="index">
	  {{item.title}}
  </el-breadcrumb-item>
</el-breadcrumb>

獲取路由數據

初始化

完整代碼

下一章節

Vue-cli實戰項目15 全局面包屑導航開發(二)