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 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
div层的移动及性能优化
Nov 16 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
对javascript继承的理解
Oct 11 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
原生javascript单例模式的应用实例分析
Feb 23 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中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python字典快速保存于读取的方法
2018/03/23 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python中比较两个列表的实例方法
2019/07/04 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
个人委托书范本
2014/04/02 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
如何正确理解python装饰器
2021/06/15 Python
python识别围棋定位棋盘位置
2021/07/26 Python