Vue--ElementUI實現主頁面橫向導航

前戲

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

面包屑導航

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>

刷新頁面，效果還是一樣的