详解基于iview-ui的导航栏路径(面包屑)配置


Posted in Javascript onFebruary 22, 2019

起因

上家公司的后台管理系统都是刷表刷出来的,所用很久很久没写后台管理系统了。换了工作后总算要开始捣腾router了,很久没用都快忘光了,所以把一些通用的模块记录一下,也分享给需要的朋友们。

经过

//router.js
let routes = [
  {
    path: '/',
    redirect: '/admin',
  },
  {
    path: '/login',
    name: 'login',
    meta: {title: '登录'},
    component: () => import('./components/login.vue')
  },
  {
    path: '/admin',
    name: 'admin',
    meta: {title: '主页'},
    component: () => import('./components/admin.vue'),
    children: [
      {
        path: 'operation',
        name: 'operation',
        meta: {title: '运营管理'},
        component: () => import('./components/admin/operation.vue')
      },
      {
        path: 'order',
        name: 'order',
        meta: {title: '订单中心'},
        redirect: 'order/index',
        component: () => import('./components/admin/order.vue'),
        children: [
          {
            path: 'index',
            name: 'index',
            meta: {title: ''},
            component: () => import('./components/admin/ordercenter.vue')
          },
          {
            path: 'detail',
            name: 'detail',
            meta: {title: '订单详情'},
            component: () => import('./components/admin/orderdetail.vue')
          },
        ]
      },
    ]
  },
]

export default routes

这个是我部分的router路径配置表

/*面包屑路径处理*/
 eve_breadcrumbItem_change(){
        var list = this.$route.fullPath.split('/')//list[0]:是空格
        this.BreadcrumbItem = []
        function fn(obj, arr, index,self) {
          if (obj.hasOwnProperty('children')&&obj['children'].length>0) {
            for (let one of obj.children) {
              if (one.name != 'index' && one.name == arr[index]) {
                self.BreadcrumbItem.push({'title': one.meta.title, 'path': list.slice(0,index+1).join('/')})
                return one.hasOwnProperty('children')&&one['children'].length>0?fn(one,arr,index+1,self):false
              }
            }
          }
        }
        for(let one of this.$router.options.routes){
          if(one.hasOwnProperty('name')&&one.name == list[1]){
            this.BreadcrumbItem.push({'title': one.meta.title, 'path': one.path})
            fn(one,list,2,this)
          }
        }
      }

这个是就是本文的重点,其实也简单,就是递归了下路径名重新组装了下数据给面包屑传过去

watch: {
  '$route'(to, from) {
    this.eve_breadcrumbItem_change()
  }
},
...
mounted() {
  this.eve_breadcrumbItem_change()
},

使用也简单,无非watch检测下路径变化,避免刷新页面时没路径,在mounted里再调用一下。

结果

结果嘛,自然就解决问题。不过路径的配置可能会和大家的不同,我喜欢在分组下默认弄个index路径,我觉得这样结构比较好,这里大家注意下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 #Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 #Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 #Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 #Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 #Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 #Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 #Javascript
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
php数组去重复数据示例
2014/02/25 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
教师自荐书
2013/10/08 职场文书
人力资源行政经理自我评价
2013/10/23 职场文书
门卫人员岗位职责
2013/12/24 职场文书
学习心得体会
2014/01/01 职场文书
主题婚礼策划方案
2014/02/10 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
拉歌口号大全
2014/06/13 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
浅析Python中的套接字编程
2021/06/22 Python
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL