vue的面包屑导航组件
用来将其放到navbar中;
Breadcrumb/index.vue
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group>
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title">
<span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.meta.title}}</span>
<router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
export default {
name: "idnex",
data(){
return {
levelList:null
}
},
created() {
this.getBreadcrumb()
},
watch:{
$route(){
this.getBreadcrumb()
}
},
methods:{
getBreadcrumb(){
let matched=this.$route.matched.filter(item=>item.name)//$route.matched 将会是一个包含从上到下的所有对象 (副本)。
const first=matched[0]
if(first && first.name !=='dashboard'){//$route.name当前路由名称 ;$route.redirectedFrom重定向来源的路由的名字
matched=[{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
}
this.levelList=matched
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 10px;
.no-redirect {
color: #97a8be;
cursor: text;
}
}
</style>
vue的面包屑导航组件的更多相关文章
- vue 在safari动态多级面包屑导航样式不刷新的bug
前言: 最近做公司的管理系统,用到了elementUI 里面的 bread面包屑组件,本来一切好好的,谁知道mac的safari样式全部缓存了,硬是下面这种效果,真头疼 而chrome,QQ均显示正常 ...
- vue 2.0 + elementUI 实现面包屑导航栏
Main.js 9种响应式面包屑导航和分步导航指示器UI设计 var routeList = []; router.beforeEach((to, from, next) => { var in ...
- amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb
amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...
- woocommerce隐藏breadcrumb面包屑导航
woocommerce已经集成比较完善的组件,当然也包含breadcrumb面包屑导航,但是我们如果调整一下breadcrumb的位置要如何操作呢?首先要先把woocommerce隐藏breadcru ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- Bootstrap (导航、标签、面包屑导航)
导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...
随机推荐
- windows彻底删除Oralce
以下是彻底删除Oralce的步骤:1. 开始->设置->控制面板->管理工具->服务停止所有Oracle服务. 2. 开始->程序->Oracle - OraHom ...
- 更换已存在项目的svn的地址
CreateTime--2017年11月23日16:20:14 Author:Marydon 如何更换已存在项目的svn的地址? 参考链接:http://blog.csdn.net/sinat_2 ...
- mariadb多实例搭建
测试环境基于centos7.2,腾讯云实验室,学习搭建! https://www.qcloud.com/developer 多实例mysql,能更加理解mysql安装的基本过程!及简单使用... ma ...
- Redis批量查询删除KEYS
对腾讯云的Redis集群不支持很多指令(config get * .flushdb.flushall.等相关指令) redis指令限制:https://www.qcloud.com/document/ ...
- SpringMVC使用Cron表达式的定时器
SpringMVC的功能很强大,集成了Quartz定时器的功能.能够通过Cron表达式和简单的注解就实现定时运行任务的功能. 网上看到不少样例,可是都不是非常全. 闲话少说.首先要在springmvc ...
- 在ListView的右边添加字母列表
在ListView的右边添加字母列表,点击某个字母时,列表就滚动到预期位置. <!-- 数字和字母栏在标题栏下边并且停靠在右边 --> <com.txrj.sms.component ...
- kubernetes中使用NFS创建pv_pvc
Persistent Volume(持久化卷)简称PV, 是一个K8S资源对象,我们可以单独创建一个PV, 它不和Pod直接发生关系, 而是通过 Persistent Volume Claim, 简称 ...
- 使用DotNetBarcode制作基本常用条码
核心代码: /// <summary> /// 打印一维码 /// </summary> /// <param name="codeText"> ...
- iOS GCD中级篇 - dispatch_group的理解及使用
上一篇GCD基础篇,以及同步.异步,并发.并行几个概率的理解 关于dispatch_group的概念以及几种场景下的使用 1.关于dispatch_group 把一组任务提交到队列中,这些队列可以不相 ...
- HDUOJ--------(1312)Red and Black
Red and Black Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...