Vue折腾记 - (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
- <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)写一个不大靠谱的面包屑组件的更多相关文章
- Vue折腾记 - (3)写一个不大靠谱的typeahead组件
Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...
- 用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具
用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具 前言 上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件.对呀,平时工作时,想要创建 ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
- 写一个可插入自定义标签的 Textarea 组件
- “插入自定义标签是什么鬼?” - “比如你要插入一个<wise></wise>的标签...” - “什么情况下会有这种需求?” - “得罪了产品的情况下...” 一.需求背 ...
- vue : 在vuex里写一个数组首尾元素互换的方法
不着急上代码,先想几个问题. vuex里怎么写方法? mutation里写vuex方法,组件中用commit调用. 数组首尾元素怎么互换? arr.splice(0, 0, arr[arr.lengt ...
- 用vue和layui简单写一个响应式数据展示表
在创建项目之前,先把我们需要的文件打包处理 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- vue 在safari动态多级面包屑导航样式不刷新的bug
前言: 最近做公司的管理系统,用到了elementUI 里面的 bread面包屑组件,本来一切好好的,谁知道mac的safari样式全部缓存了,硬是下面这种效果,真头疼 而chrome,QQ均显示正常 ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
随机推荐
- android 网络技术基础学习 (七)
使用httpclient协议访问网络: public class MainActivity extends Activity implements OnClickListener{ public vo ...
- 使用redux代码文件的组织方式
从架构触发,开始一个新应用的时候,代码文件的组织方式一定要考虑好 如果之前使用过mvc的框架那么对按角色组织方式一定不陌生 角色组织方式 reducer/ todoReducer.js filterR ...
- redis介绍及常见问题总结
1.redis c语言编写的一个开源软件,使用字典结构存储数据,支持多种类型数据类型 数据类型:字符串,字典,列表,集合,有序集合 2.redis特点 速度快:c语言实现的,所有数据都存储在计算机内存 ...
- Alert Log删除
标题:Renaming or Deleting the Alert Log While an Oracle Instance is Up & Running (文档 ID 74966.1) Q ...
- php第二节(变量、常量)
<?php /** * 类型转换 * 自动转换 数据在运算过程中自动转换 * 空字符串 false * "0" false * null false * 0 false * ...
- C++新闻检索类
研究长字符串快速全文检索技术,实现某电力公司新闻中心新闻稿件全文检索统计系统. 1. 设计实现适合新闻稿件的基础类库 2. 新闻稿件全文检索功能实现 3. 新闻稿件按照关键字统计查询 代码如下 P ...
- sqlite内存数据库和文件数据库的同步[转]
由于sqlite对多进程操作支持效果不太理想,在项目中,为了避免频繁读写 文件数据库带来的性能损耗,我们可以采用操作sqlite内存数据库,并将内存数据库定时同步到文件数据库中的方法. 实现思路如下: ...
- 【rip-基础配置】
配置rip,默认rip id为 1:rip有version1和version2两个版本;宣告与rip直连的网段; 优化rip: [interface_name] rip poison-reverse ...
- 微信小程序之公共组件写法
我们要实现如下图功能 小程序一个公共的弹出组件,首先我们创建一个pop文件 然后在生成的pop.json文件中将component定义为true { "component": tr ...
- django中的ContentType使用
使用背景 最近设计表的时候遇到一个问题,有两门课程 一门专业课,一门学位课,我们按照时间长度来进行售卖,比如专业课一个月19元,两个月35元,三个月50元. 可以这么做但是领导不让我这么设计.... ...