详解基于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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
ant design charts 获取后端接口数据展示
May 25 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
简单易用的计数器(数据库)
2006/10/09 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
Python实现的购物车功能示例
2018/02/11 Python
python检索特定内容的文本文件实例
2018/06/05 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Python3的socket使用方法详解
2020/02/18 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
Order by的几种用法
2013/06/16 面试题
internal修饰符起什么作用
2013/12/16 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
医德医风演讲稿
2014/05/20 职场文书
实习单位证明范例
2014/11/17 职场文书
2014年德育工作总结
2014/11/20 职场文书
校本课程教学计划
2015/01/19 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python