专栏首页CRPER折腾记Vue折腾记 - (2)写一个不大靠谱的面包屑组件

Vue折腾记 - (2)写一个不大靠谱的面包屑组件

前言

这个组件比侧边栏的简单许多.. 那么这个你能学到什么,见仁见智哈....


效果图

我把页面标题和面包屑封装到一起..就不用涉及到组件的通讯了, 不然又要去监听路由或者依赖状态去获取

疑惑解答:

  1. 点击父(也就是折叠菜单)为什么会跑到子菜单第一个 因为我第一个子路由是空路径,也就是默认路由
  2. 点击首页为什么会跑到客户管理的第一个 因为根路由我写了个重定向

功能点

  • 支持分隔符的传入,字符串格式
  • 标题的同步改动

实现原理

面包屑的文字不是通过命名路由的name实现(很多问题), 而是放到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>

总结

看了有所收获是我的荣幸,看了毫无所获那我也没辙了,哇哈哈..

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 折腾记 - (9) 写一个挺靠谱的typeahead组件

    之前那个typeahead写的太早,不满足当前的业务需求 而且有些瑕疵,还有也不方便传入数据和响应数据.. 于是就推倒了重来,写了个V2的版本

    CRPER
  • Vue 折腾记 - (5) 写一个不大靠谱的selectSearch组件

    这个功能在网站中也很常见;下拉选择带搜索 基于之前的typeahead组件的基础上完善, 把过滤计算放在了computed ,其他逻辑也有所优化,代码更好理解

    CRPER
  • Angular 2 + 折腾记 :(9) 初步了解指令,及动手一步一步写个自定义指令

    指令这种东西,可以加强用户体验,减少一些重复工作; 跟着我来实现一个悬浮链接打开的指令

    CRPER
  • 95个可见字符生成的6位密码词典有多大?

    -rw-r--r-- 1 root root 4.7T Apr 14 07:41 /data3/ccc.txt

    我爱你的一诺
  • 【精读】十分钟读完《大数据》

    推荐语: 在极权的国家,他们手上拥有足够的资讯,足以利用这资讯,掌握每一个人的日常生活;“老大哥”的影子,可以无所不在……涂子沛先生《大数据》这部书,清楚地叙述...

    钱塘数据
  • IBM研究人员通过探索缺失的事物来解释机器学习模型

    在《白额闪电》(The Adventure of the Silver Blaze)中,福尔摩斯并不是通过能看到的线索解决了案件,而是通过注意到某一事物的缺失...

    AiTechYun
  • win10 uwp url encode

    开发中,经常遇到使用中文无法作为 URL 传输的情况,如果想把 中文作为 URL 传输,那么需要对中文进行转换。 UWP 提供一些方法让我们很容易把 中文转为 ...

    林德熙
  • day24 03 多继承

     A,B,C,D四个类,其中D类继承A,B,C三个父类,因此也叫多继承,子类方法调用的时候先找自己里面的,没有再根据就近原则逐个找父类里面的,最后没有还是会报错

    py3study
  • 李飞飞得意门生Andrej Karpathy出任特斯拉AI主管

    陈桦 编译整理 量子位 报道 | 公众号 QbitAI 今天,特斯拉新任命了一位人工智能主管:计算机视觉专家、李飞飞的得意门生Andrej Karpathy。 ...

    量子位
  • 微服务平台之API授权

    微服务平台的安全控制包括登录认证、用户授权、服务调用安全等多个方面,其中,服务调用安全又分为系统内服务调用认证、系统间服务调用认证。

    yuanyi928

扫码关注云+社区

领取腾讯云代金券