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>

刷新页面，效果还是一样的