前戏
实现的效果是怎样的呢？如下图所示
面包屑导航
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>
刷新页面，效果还是一样的
