详解基于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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
JavaScript setTimeout()基本用法有哪些
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 常用算法和时间复杂度
2013/07/01 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
vue-cli3 热更新配置操作
2020/09/18 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
详细解读Python中解析XML数据的方法
2015/10/15 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
机电专业大学生求职信
2013/10/04 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
大学生社团活动总结
2014/04/26 职场文书
项目负责人任命书
2014/06/04 职场文书
2014年物流工作总结
2014/11/25 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
新年晚会开场白
2015/05/29 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL