vue2.0 elementUI制作面包屑导航栏


Posted in Javascript onFebruary 22, 2018

Main.js

var routeList = [];
router.beforeEach((to, from, next) => {
 var index = -1;
 for(var i = 0; i < routeList.length; i++) {
  if(routeList[i].name == to.name) {
   index = i;
   break;
  }
 }
 if (index !== -1) {
//如果存在路由列表,则把之后的路由都删掉
  routeList.splice(index + 1, routeList.length - index - 1);
 } else if(to.name != '登录'){
  routeList.push({"name":to.name,"path":to.fullPath});
 }
 to.meta.routeList = routeList;
 next()
});

2、在要使用的组件中

<template>
  <div class="level-bread">
   <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in realList" :to="item.path">{{item.name}}</el-breadcrumb-item>
   </el-breadcrumb>
  </div>
</template>

<script>
  export default {
   name: "lelve-bread",
   created(){
    this.getRoutePath();
   },
   data() {
    return {
     realList: []
    }
   },
   methods:{
    getRoutePath() {
     this.realList = this.$route.meta.routeList;
    }
   },
   beforeRouteEnter(to,from, next) {
    next((vm) => {
     vm.realList = to.meta.routeList;
    });
   },
   // watch:{
   //  $route:function(newV,oldV) {
   //   this.realList =newV.meta.routeList;
   //  }
   // }
  }
</script>

用 watch 或者 beforeRouteEnter 均可。

需要注意的是,beforeRouteEnter 此时访问不到this。

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不!能!获取组件实例 `this`
  // 因为当守卫执行前,组件实例还没被创建
 },
 beforeRouteUpdate (to, from, next) {
  // 在当前路由改变,但是该组件被复用时调用
  // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
  // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
 }
}

以上就是本次我们整理的全部内容,希望能够帮助到大家,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
webpack将js打包后的map文件详解
Feb 22 #Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 #Javascript
深入理解ES6中let和闭包
Feb 22 #Javascript
vue+iview+less+echarts实战项目总结
Feb 22 #Javascript
在vscode中统一vue编码风格的方法
Feb 22 #Javascript
vue webpack打包优化操作技巧
Feb 22 #Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 #Javascript
You might like
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php开发文档 会员收费1期
2012/08/14 PHP
event.srcElement+表格应用
2006/08/29 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
python端口扫描系统实现方法
2014/11/19 Python
Python and、or以及and-or语法总结
2015/04/14 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
培训心得体会
2013/12/29 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
放弃继承权公证书
2015/01/23 职场文书
公司员工体检通知
2015/04/21 职场文书
观后感格式
2015/06/19 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
《所见》教学反思
2016/02/23 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技