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

2024-10-29 00:22:29

起因

上家公司的后台管理系统都是刷表刷出来的，所用很久很久没写后台管理系统了。换了工作后总算要开始捣腾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路径，我觉得这样结构比较好，这里大家注意下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue实现导航栏效果（选中状态刷新不消失）

Vue导航栏用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标全是UI给的选中和未选中样式的图片,根据公司要求,你也可能会用fontsize去写.(全部代码黏贴到本文的最后面了) 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未
vue2.0 elementUI制作面包屑导航栏

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
当vue路由变化时,改变导航栏的样式方法

当我们需要做一个类似顶部或底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件, 并且改变导航栏按钮的样式,如果用<router-link to=""><router-link/> 跳转的时候,我们可以这样做, 改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的. 先看下效果: 贴上我的路由文件js export default new Router({ routes: [ { path: '/', co
vue自定义底部导航栏Tabbar的实现代码

如图所示,要完成类似的一个底部导航切换. 首先.我们需要分为5个大的VUE文件.可以根据自己的习惯来放在不同的位置. 我将5个主要的vue文件放在了5个不同的文件夹然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 <template> <div class="itemWarp flex_mid" @click='changePage'> <span v-show='!bol'> <
vue实现nav导航栏的方法

每一个网页项目都少不了导航栏,通过原始的方法基本上都是可以写出来的.但是要写出代码量少,冗余度低的代码就要动脑子思考一下了. 最近写了一个百度地图的项目,要求底部有一个导航栏.具体如下图: 首先,拿到了底部导航栏的所有图标图片,图片都有两种.灰色的代表未选中,选中的用带样色的图片替换. 先看一下,组件中 html结构:通过vue提供的v-for方法,进行遍历显示footNav这个数组.数组里边存放着{title:"银行",url:" ",url1:" &q
VUE 实现滚动监听导航栏置顶的方法

HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div>  </div> <div id="fixedBar" :class=&quo
vue使用ElementUI时导航栏默认展开功能的实现

本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到. 好了,先看看效果吧好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本
vue.js 底部导航栏一级路由显示子路由不显示的解决方法

最近利用vue第三方UI MuseUI开发webapp,然后在导航栏这里出现了问题,我需要在导航栏上的几个路由上显示底部导航栏,在其他路由上不显示,就这个问题,MuseUI的底部导航栏直接加载在app.vue里面,会每个页面都有导航栏,所以这种方式不可行,后来我真的使出了浑身解数,去MuseUI作者GitHub上面提问,无果,去segmentfault上面提问,无果,去vue官方群提问,无果,在提问之前,我都是经过一番搜索,思考的,但是这些都让我崩溃了.可能出错的地方从路由URL,museUI的
vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能

目录 0 前言 1 准备工作 1.1 安装ant-design-vue 1.2 安装图标组件包 2 选择组件 3 路由文件 4 Vue导航页面 5 最终效果 0 前言最近在自己搞一个前后端小项目,前端想使用ant-design-vue的layout组件实现动态导航栏和面包屑,但是网上的资料较少,所以我就自己整合实现了一下,在此记录分享. 1 准备工作基于一个新建的Vue3项目上实现. 1.1 安装ant-design-vue 官方文档:Components Overview - Ant De
BootStrap学习笔记之nav导航栏和面包屑导航

nav导航栏 <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的log
详解android使用ItemDecoration 悬浮导航栏效果

开始逐渐领略到ItemDecoration的美~ 今天让我使用 ItemDecoration 来完成可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的RecyclerView的基本使用,我们先来完成基本的recyclerView: 第一步:布局里写一个RecyclerView 第二步:实例化 recyclerView = (RecyclerView) findViewById(R.id.recyclerView); 第三步:获取所需的数据 (这里我们
详解基于Android的Appium+Python自动化脚本编写

1.Appium Appium是一个开源测试自动化框架,可用于原生,混合和移动Web应用程序测试, 它使用WebDriver协议驱动iOS,Android和Windows应用程序. 通过Appium,我们可以模拟点击和屏幕的滑动,可以获取元素的id和classname,还可以根据操作生成相关的脚本代码. 下面开始Appium的配置. appPackage和APPActivity的获取任意下载一个app 解压但是解压出来的xml文件可能是乱码,所以我们需要反编译文件. 逆向AndroidMan
mysql数据库详解(基于ubuntu 14.0.4 LTS 64位)

1.mysql数据库的组成与相关概念首先明白,mysql是关系型数据库,和非关系型数据库中最大的不同就是表的概念不一样. +整个mysql环境可以理解成一个最大的数据库:A +用mysql创建的数据库B是属于A的,是数据的仓库,相当于系统中的文件夹 +数据表C:是存放数据的具体场所,相当于系统中的文件,一个数据库B中包含若干个数据表C(注意此处的数据库B和A不一样) +记录D:数据表中的一行称为一个记录,因此,我们在创建数据表时,一定要创建一个id列,用于标识"这是第几条记录",id
详解基于django实现的webssh简单例子

本文介绍了详解基于django实现的webssh简单例子,分享给大家,具体如下: 说明新建一个 django 程序,本文为 chain. 以下仅为简单例子,实际应用可根据自己平台情况进行修改. 打开首页后,需要输入1,后台去登录主机,然后返回登录结果. 正常项目可以post 主机和登录账户,进行权限判断,然后去后台读取账户密码,进行登录. djang后台需要安装以下模块安装后会有一个版本号报错,不影响 channels==2.0.2 channels-redis==2.1.0 amq
zabbix 4.04 安装文档教程详解(基于CentOS 7.6)

1 安装前准备: 1.1 安装JDK 卸载openjdk # rpm -qa | grep java # yum remove java-1.8.0-openjdk # yum remove java-1.8.0-openjdk-headless 安装JDK包 # rpm -ivh jdk-8u191-linux-x64.rpm 1.2 安装依赖包 # yum install -y net-snmp net-snmp-devel OpenIPMI-devel libssh2-dev
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程

一.导入excel文件和相关库 import pandas; import matplotlib; from pandas.tools.plotting import scatter_matrix; data = pandas.read_csv("D:\\面积距离车站.csv",engine='python',encoding='utf-8') 显示文件大小 data.shape data 二.绘制多个变量两两之间的散点图:scatter_matrix()方法 #绘制多个变量两两之间的
详解基于Spring Data的领域事件发布

领域事件发布是一个领域对象为了让其它对象知道自己已经处理完成某个操作时发出的一个通知,事件发布力求从代码层面让自身对象与外部对象解耦,并减少技术代码入侵. 一. 手动发布事件 // 实体定义 @Entity public class Department implements Serializable { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer departmentId; @Enumerate
详解基于Mybatis-plus多租户实现方案

一.引言小编先解释一下什么叫多租户,什么场景下使用多租户. 多租户是一种软件架构技术,在多用户的环境下,共有同一套系统,并且要注意数据之间的隔离性. 举个实际例子:小编曾经开发过一套支付宝程序,这套程序应用在不同的小程序上,当使用者访问不同,并且进入相对应的小程序页面,小程序则会把用户相关数据传输到小编这里.在传输的时候需要带上小程序标识(租户ID),以便小编将数据进行隔离. 当不同的租户使用同一套程序,这里就需要考虑一个数据隔离的情况. 数据隔离有三种方案: 1.独立数据库:简单来说就是一个

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

相关推荐

随机推荐