Vue--ElementUI实现主页⾯横向导航
前戏
实现的效果是怎样的呢？如下图所⽰
⾯包屑导航
elementUI提供了⾯包屑组件，可以⽅便我们快速的实现我们的效果，在components/AppMain/index.vue⾥写如下代码
<template>
<div class="main">
<!-- $a.title 是我们在路由⾥定义的meta⾥的title值，$route.path，路由，点击会跳转到对应的路由上，这⾥我们也动态的获取-->
<el-breadcrumb-item class="line" :to="{ path:  $route.path }">{{ $a.title}}</el-breadcrumb-item>
elementui登录界面</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="/">
<!-- $a.title 是我们在路由⾥定义的meta⾥的title值，$route.path，路由，点击会跳转到对应的路由上，这⾥我们也动态的获取-->
<el-breadcrumb-item class="line" :to="{ path:  $route.path }">{{ $a.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="/">
<!-- $a.title 是我们在路由⾥定义的meta，$route.path，路由，点击会跳转到对应的路由上 -->
<el-breadcrumb-item class="line" :to="{ path:  $route.path }">{{ $a.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>
刷新页⾯，效果还是⼀样的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。