详解基于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 for eclipse插件安装方法
Apr 27 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
js中settimeout方法加参数
Feb 28 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 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面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
JavaScript 乱码问题
2009/08/06 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
使用p5.js临摹动态图形
2019/10/23 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python 常见的排序算法实现汇总
2020/08/21 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
优秀中专生推荐信
2013/11/17 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
党员证明模板
2015/06/19 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript