前戲

實現的效果是怎樣的呢？如下圖所示

麵包屑導航

elementUI提供了麵包屑元件，可以方便我們快速的實現我們的效果，在components/AppMain/index.vue裡寫如下程式碼

<template>
  <div class="main">
    

      <!-- $route.meta.title 是我們在路由裡定義的meta裡的title值，$route.path，路由，點選會跳轉到對應的路由上 ，這裡我們也動態的獲取-->
      <el-breadcrumb-item class="line" :to="{ path:  $route.path }"
 
>{{ $route.meta.title}}</el-breadcrumb-item>
       
      </el-breadcrumb>
    <router-view> </router-view> <!-- 元件的出口 -->
    
  </div>
</template>

重啟服務，重新整理頁面，效果如下

當點選會員管理的時候，會將meta裡的title值渲染到這個頁面上，後面的會員管理是我們views/member/index.vue裡寫的內容

上面大概的效果已經出來了，還有點樣式和我們最終的效果是有區別的。還有一點是點選首頁時希望不出現橫向導航，在修改components/AppMain/index.vue裡的程式碼

<template>
  <div class="main">
          <!-- v-show='$route.path !== "/home" 不顯示首頁的導航 ，不等於/home才顯示-->
    <el-breadcrumb v-show='$route.path !== "/home"' separator="/">

      <!-- $route.meta.title 是我們在路由裡定義的meta裡的title值，$route.path，路由，點選會跳轉到對應的路由上 ，這裡我們也動態的獲取-->
      <
 
el-breadcrumb-item class="line" :to="{ path:  $route.path }">{{ $route.meta.title}}</el-breadcrumb-item>
       
      </el-breadcrumb>
    <router-view> </router-view> <!-- 元件的出口 -->

  </div>
</template>

<style scoped>
  .el-breadcrumb{
        height: 10px;
        padding: 20px;
        border-radius: 4px; /* 圓角 */
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* element提供的邊框 */
  }
  
  /* 左邊的那條綠線 */
  .line{
        border-left: 3px solid #31c17b;
        padding-left: 10px;
  }
  </style>

重新整理頁面，我們的效果就出來了

將麵包屑作為子元件匯入在AppMain下的index.vue裡

上面我們已經完成了麵包屑導航，我們可以提取成一個元件，在引用它，在AppMain下建立一個 Link.vue的檔案，程式碼如下

<template>
    <!-- v-show='$route.path !== "/home" 不顯示首頁的導航 -->
    <el-breadcrumb v-show='$route.path !== "/home"' separator="/">

    <!-- $route.meta.title 是我們在路由裡定義的meta，$route.path，路由，點選會跳轉到對應的路由上 -->
    <el-breadcrumb-item class="line" :to="{ path:  $route.path }">{{ $route.meta.title}}</el-breadcrumb-item>
     
    </el-breadcrumb>
</template>



<style scoped>
.el-breadcrumb{
      height: 10px;
      padding: 20px;
      border-radius: 4px; /* 圓角 */
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* element提供的邊框 */
}

/* 左邊的那條綠線 */
.line{
      border-left: 3px solid #31c17b;
      padding-left: 10px;
}
</style>

在修改components/AppMain/index.vue裡的程式碼，如下

<template>
  <div class="main">
        
    <app-link></app-link>
    
    <!-- 元件渲染的出口 -->
    <router-view></router-view>
  </div>
</template>

<script>

// 匯入子元件
// link內建有個標籤，不會被當做子元件，所以我們重新命名為AppLink
import AppLink from './Link.vue'

export default {
      components: {AppLink} // 注意有s
}
</script>

重新整理頁面，效果還是一樣的