vue-router + el-menu

1. el-menu的router属性

el-menu中有一属性:router,默认是false
在这里插入图片描述

1.1 使用默认配置,即false

这时候需要自己在点击子菜单的时候进行导航,在el-menu添加方法,里边有三个参数

  • index: 选中菜单项的 index,
  • indexPath: 选中菜单项的 index path,
  • item: 选中菜单项
    在这里插入图片描述
<el-menu :router="true" :collapse-transition="false" @select="selectMenu"><sidebar-item v-for="route in routes" :key="route.url" :item="route" :base-path="route.url" />
</el-menu>const menuSelect = (index) => {// 自定义事件,router.push导航router.push(index)
}
1.2 开启vue-router模式,即true

element-plus中源码中写好了逻辑
在这里插入图片描述

2. 属性 index

el-menu中使用index作为path,所以必须唯一

2.1 菜单中index是合并的,这样对照了vue-router中的路由表,都是合并的

在这里插入图片描述

在这里插入图片描述

2.1 菜单中index是分开的

主要做两点

  1. menu地方,不进行合并
  2. vue-router地方,在path配置的时候,加上/,相当于根路径
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/52595.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js 时间戳转日期格式

timestampToDate(obj.project_time), import moment from “moment”; const timestampToDate (timestamp: any) > { const date new Date(timestamp * 1000); const newDate moment(date).format(“YYYY-MM-DD”); return newDate; // 使用Intl.DateTimeFormat进行格式…

本地部署大语言模型详细操作步骤

本地部署大语言模型&#xff0c;尤其是像我这样的基于中文开源项目的大模型&#xff0c;涉及的步骤相对复杂&#xff0c;需要一定的技术背景。下面我将详细阐述整个流程&#xff1a; 环境准备&#xff1a; 硬件准备&#xff1a;大语言模型通常需要高性能的计算资源&#xff0c;…

uni-app实现web-view和App之间的相互通信

双向实时 如果app端部署成网站&#xff0c;则web-view就是iframe&#xff0c;使用也可以双向通讯 https://uniapp.dcloud.net.cn/component/web-view.html APP端代码 index.vue: <template><web-viewid"m-webview":fullscreen"true":src"…

epoll内核原理与实现详解

目录 1 epoll相关理论基础 1.1 I/O多路复用技术 1.2 事件驱动模型 1.2.1 基本概念 1.2.2 优缺点分析 1.2.3 与epoll的关联 1.3 epoll机制简介 1.3.1 核心原理 1.3.2 优点 2 epoll内核原理 2.1 epoll数据结构 2.1.1 主要数据结构 2.1.2 数据结构关系 2.2 epoll工作…

不同vlan之间的通信方法

1.通过路由器的物理接口 1.给PC1,PC2配置IP地址&#xff0c;网关2.进入交换机配置vlan&#xff0c;交换机所有口都配置access口并绑定vlan3.配置路由器&#xff0c;进入路由器的两个接口配置网关IP和掩码缺点&#xff1a;成本高&#xff0c;每增加一个vlan就需要一个物理端口和…

双流join

在 Flink 中实现双流 join 主要有两种方式&#xff1a;基于窗口的 join&#xff08;Window Join&#xff09;和基于时间区间的 join&#xff08;Interval Join&#xff09;。以下是这两种方式的简要说明和代码示例&#xff1a; 1. 基于窗口的 join&#xff08;Window Join&…

辛巴赔付到账,罗永浩退一赔三:直播带货终于往好方向卷了下…

因为快手顶流辛巴扔出的一颗重磅炸弹「被辛巴架火上烤&#xff0c;带货顶流圈快乱成一锅粥了……」&#xff0c;把直播带货行业藏在深处的淤泥炸出了水面。 原本表面看上去清澈、安静的水面&#xff0c;越来越浑&#xff0c;且还冒着火星子&#xff01;‍‍‍‍‍‍‍ 自从这个…

学习node.js十三,文件的上传于下载

文件上传 文件上传的方案&#xff1a; 大文件上传&#xff1a;将大文件切分成较小的片段&#xff08;通常称为分片或块&#xff09;&#xff0c;然后逐个上传这些分片。这种方法可以提高上传的稳定性&#xff0c;因为如果某个分片上传失败&#xff0c;只需要重新上传该分片而…

无人机电调接线

接线方式&#xff1a; 电调的作用是将飞控板的PWM控制信号转变为电流信号 因为电机的电流是很大的&#xff0c;通常每个点击正常工作时都平均有3A左右的电流&#xff0c;如果没有电调的存在&#xff0c;飞控无法承受这么大的电流。 电调的选择&#xff1a;电调上标的电流值是…

六、图结构

文章目录 一、引入二、基本概念三、图的表示四、图的遍历4.1 图的深度优先遍历&#xff08;DFS&#xff09;4.2 图的广度优先遍历&#xff08;BFS&#xff09;4.3 图的深度优先 VS 广度优先 一、引入 二、基本概念 三、图的表示 package com.gyh.grapg;import java.util.ArrayL…

udt聊天室

创建一个简单的udp聊天室 服务器代码思路&#xff1a; 初始化&#xff1a; 创建UDP套接字。配置服务器的IP和端口号&#xff0c;并绑定套接字到这个地址。 数据接收和处理&#xff1a; 使用循环接收客户端发来的消息。recvfrom()解析消息类型&#xff08;如登录、发送、下线&a…

OpenCV结构分析与形状描述符(22)计算图像中某个轮廓或区域的矩函数moments()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算一个多边形或光栅化形状直到三阶的所有矩。 该函数计算一个向量形状或光栅化形状直到三阶的矩。结果返回在 cv::Moments 结构中。 函数原型…

基本输入与输出

引言 在前面的课程中&#xff0c;我们已经学习了 Python 中的基本数据类型、数据类型的运算和转换。本课时将聚焦于 Python 中的基本输入与输出功能&#xff0c;具体包括使用 input() 函数获取用户输入、使用 print() 函数输出信息以及格式化输出。通过这些功能&#xff0c;你可…

ATF UFS初始化笔记

1. JESD220 中关于UFS初始化的描述 原文 13.1.3 Initialization and boot code download process The initialization and boot code download process is made up of the following phases: partial initialization, boot transfer and initialization completion. 13.1.3.…

多线程——死锁

死锁 在Java中使用多线程&#xff0c;就会有可能导致死锁问题。死锁会让程序一直卡住&#xff0c;程序不再往下执行。 我们只能通过中止并重启的方式来让程序重新执行。 这是我们非常不愿意看到的一种现象&#xff0c;我们要尽可能避免死锁的情况发生&#xff01; 死锁的原因…

数据结构之栈和队列的应用

目录 一、栈的应用 1. 括号匹配 2. 计算后缀表达式 方法一&#xff08;栈&#xff09; 方法二&#xff08;数组模拟栈&#xff09; 二、队列应用 1. 二叉树层序遍历 方法一&#xff08;队列&#xff09; 三、总结 一、栈的应用 1. 括号匹配 给定一个只包括 (&#xf…

List<Map<String, Object>>汇总统计排序

开发环境&#xff1a;jdk 1.8 需求一&#xff1a; 1、统计每个小时(升序)不同事件的产品产量 2、统计不同事件&#xff08;OK 、NG&#xff09;的总产量 public static void main(String[] args) {//数据源List<Map<String, Object>> list new ArrayList<Map…

云计算实训48——k8s环境搭建(详细版)

1.创建主机、设置ip、设置hostname 2.设置免密登录 # 生成私钥 [rootk8s-master ~]# ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): /root/.ssh/id_rsa already exists. Overwrite (y/n)? y Enter passphr…

77-java 装饰器模式和适配器模式区别

‌Java中的装饰器模式和适配器模式虽然都涉及到对象的组合和包装&#xff0c;但它们的应用场景和目的有所不同。‌ ‌装饰器模式的目的是在不修改原始对象的基础上&#xff0c;动态地添加功能或行为。‌它允许用户通过创建一个包含原始对象的包装类&#xff08;装饰器&#xff…

Computer Vision的学习路线

学习**Computer Vision&#xff08;计算机视觉&#xff09;**的过程中&#xff0c;可以按照以下步骤循序渐进地掌握基础知识、算法和实际应用。这个学习路线将涵盖从基础理论到前沿技术的各个层面。 1. 数学与基础知识 1.1 线性代数 计算机视觉中的图像处理和模型训练都依赖…