vue中的面包屑导航组件实例代码


Posted in Javascript onJuly 01, 2019

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>

ps:下面在看下一段代码Vue 面包屑导航

样式采用的是element ui 中的面包屑设置的,

<template>
<el-breadcrumb>
<el-breadcrumb-item separator = '/' v-for = "(item,index) in breadlist" :key = 'index' :to="{path: item.path}">{{item.meta.CName}}
</el-breadcrumb-item> 
</el-breadcrumb>
</template>
js部分
<script>
export default {
data(){
return {
breadlist: ''
}
},
created() {
this.getBread();
},
methods:{
getBread(){
this.breadlist = this.$route.matched;
this.$route.matched.forEach((item,index)=>{
//先判断父级路由是否是空字符串或者meta是否为首页,直接复写路径到根路径
item.meta.CName === '首页' ? item.path = '/' : this.$route.path === item.path;
});
}
},
watch:{
$route(){
this.getBread();
}
}
}
</script>

总结

以上所述是小编给大家介绍的vue中的面包屑导航组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
分类解析jQuery选择器
Nov 23 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
Vue动态面包屑功能的实现方法
Jul 01 #Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 #Javascript
基于Vue SEO的四种方案(小结)
Jul 01 #Javascript
JavaScript一元正号运算符示例代码
Jun 30 #Javascript
重学JS之显示强制类型转换详解
Jun 30 #Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 #Javascript
微信小程序如何自定义table组件
Jun 29 #Javascript
You might like
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
js实现div色块拖动录制
2020/01/16 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript