前言
这个组件比侧边栏的简单许多,你能学到什么,见仁见智哈。
效果图及实现原理
我把页面标题和面包屑封装到一起，就不用涉及到组件的通讯了, 不然又要去监听路由或者依赖状态去获取
- 疑惑解答:
- 点击父(也就是折叠菜单)为什么会跑到子菜单第一个(因为我第一个子路由是空路径,也就是默认路由)
- 点击首页为什么会跑到客户管理的第一个
- 因为根路由我写了个重定向
- 功能点
- 支持分隔符的传入,字符串格式
- 标题的同步改动
- 实现原理
面包屑的文字通过放到meta里面实现一个自定义name,然后遍历构建我们需要的。
代码
路由大致的写法(懒加载)
import pageRouterView from "@/pages/adManage/adManage.vue"; // 广告管理 const ADADD = resolve => require(["@/pages/adManage/adadd.vue"], resolve); const ADCHECK = resolve => require(["@/pages/adManage/adcheck.vue"], resolve); export default [ { path: "ad", component: pageRouterView, meta: { breadcrumbName: "广告管理" }, children: [ { path: "", component: ADADD, meta: { breadcrumbName: "广告新增" } }, { path: "check", component: ADCHECK, meta: { breadcrumbName: "广告审核" } } ] } ];
breadcrumb.vue
<template> <div> <span class="title">{{title}}</span> <ul class="breadcrumb"> <li v-for="(item,index) in brumblist" :key="index"> <router-link :to="item.path">{{item.meta.breadcrumbName}}</router-link> <span class="separator" v-if="index !== brumblist.length-1">{{separator}}</span> </li> </ul> </div> </template> <script> export default { created () { this.getBreadcrumb(); }, data () { return { title: '', // 页面标题 brumblist: '' // 路由集合 } }, props: ['separator'], methods: { getBreadcrumb () { this.brumblist = this.$route.matched; //待遍历的路由对象 this.$route.matched.forEach((item, index) => { // 判断父级路由是否为空字符串或者meta是否为首页,直接复写路径到根目录 // 后面的就是判断路由和当前遍历的项目是否一致,是的话把标题的值给上 item.meta.breadcrumbName === '首页' ? item.path = '/' : this.$route.path === item.path ? this.title = item.meta.breadcrumbName : ''; }) } }, watch: { $route () { this.getBreadcrumb(); } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> ul { list-style: none; margin: 0; padding: 0; clear: both; li { float: left; } a { text-decoration: none; color: #333; &:hover { color: #20a0ff; text-decoration: underline; } } } .separator { display: inline-block; padding: 0 5px; } .title { display: inline-block; font-weight: 700; font-size: 20px; } .breadcrumb { float: right; padding: 5px; } </style>
