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

这里写图片描述

疑惑解答:

点击父(也就是折叠菜单)为什么会跑到子菜单第一个

因为我第一个子路由是空路径,也就是默认路由

点击首页为什么会跑到客户管理的第一个

因为根路由我写了个重定向

功能点

支持分隔符的传入,字符串格式
标题的同步改动
实现原理

面包屑的文字不是通过命名路由的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

{{title}}

    <li v-for="(item,index) in brumblist" :key="index">
    <router-link :to="item.path">{{item.meta.breadcrumbName}}
    {{separator}}

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;
}

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

Vue折腾记 - (2)写一个不大靠谱的面包屑组件的更多相关文章

  1. Vue折腾记 - (3)写一个不大靠谱的typeahead组件

    Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...

  2. 用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具

    用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...

  3. 用vue写一个仿app下拉刷新的组件

    如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...

  4. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

  5. 写一个可插入自定义标签的 Textarea 组件

    - “插入自定义标签是什么鬼?” - “比如你要插入一个<wise></wise>的标签...” - “什么情况下会有这种需求?” - “得罪了产品的情况下...” 一.需求背 ...

  6. vue : 在vuex里写一个数组首尾元素互换的方法

    不着急上代码,先想几个问题. vuex里怎么写方法? mutation里写vuex方法,组件中用commit调用. 数组首尾元素怎么互换? arr.splice(0, 0, arr[arr.lengt ...

  7. 用vue和layui简单写一个响应式数据展示表

    在创建项目之前,先把我们需要的文件打包处理 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. vue 在safari动态多级面包屑导航样式不刷新的bug

    前言: 最近做公司的管理系统,用到了elementUI 里面的 bread面包屑组件,本来一切好好的,谁知道mac的safari样式全部缓存了,硬是下面这种效果,真头疼 而chrome,QQ均显示正常 ...

  9. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

随机推荐

  1. Ajax,Json数据格式

    同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待     卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随     意做其他事 ...

  2. group by 注意的细节 ,

    1. GROUP BY子句必须出现在WHERE子句之后,ORDER BY子句之前. HAVING语句必须在ORDER BY子句之后.(where先执行,再groupby分组:groupby先分组,ha ...

  3. Oracle udev 绑定磁盘(转)

    scsi_id命令发出一个SCSI INQUIRY指令给设备,访问vital product data (VPD)页0x83的数据,那里包含设备的WWID和其他的信息,或者页0x80的数据,那里包含单 ...

  4. 转载:EJB到底是什么

    这篇博客用通俗易懂的语言对EJB进行了介绍,写得很好,笔者在这里转载一下. 链接:https://www.cnblogs.com/strugglion/p/6027318.html

  5. 微信小程序之公共组件写法

    我们要实现如下图功能 小程序一个公共的弹出组件,首先我们创建一个pop文件 然后在生成的pop.json文件中将component定义为true { "component": tr ...

  6. 【tp5.1】微信公众号授权登录及获取信息录入数据库

    微信公众号开发文档链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432 微信公众号授权登录分为两种: 1.以 ...

  7. STM32CubeMx配置USART注意的一个问题

    HAL_UART_Receive_IT(&huart1, (uint8_t *)aRxBuffer, Number);意思是接收到Number个字节后,触发HAL_UART_RxCpltCal ...

  8. hive表格取差集

    hive 求两个集合的差集 业务场景是这样的,这里由两个hive表格A和B A的形式大概是这样的:uid B的形式大概是这样的:uid 我想要得到存在A中但是不存在B中的uid 具体代码如下 sele ...

  9. mysql日志管理#慢日志详解

    MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long_query_time值的SQL,则会被记录到慢查询日志中 long_q ...

  10. 常用 css html 样式

    CSS基础必学列表 CSS width宽度 CSS height高度 CSS border边框 CSS background背景 CSS sprites背景拼合 CSS float浮动 CSS mar ...