vue-router + el-menu

news2024/11/26 9:49:32

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.coloradmin.cn/o/2128776.html

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

相关文章

【EJB】会话Bean(Session Bean)

单例会话****bean在每个应用程序中实例化一次&#xff0c;并存在于应用程序的生命周期中。单例会话bean是为单个企业bean实例在客户端之间共享和并发访问的环境而设计的。 单例会话Bean提供了与无状态会话Bean相似的功能&#xff0c;但与它们不同&#xff0c;因为每个应用程序…

基于Python的可视化在线学习系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于pythondjangovueMySQL的可…

Windows系统介绍

文章目录 1、Windows启动过程1.1 启动过程BIOS1.2 启动过程MBR1.3 启动过程 GPT1.4 启动过程BootMgr1.5 启动过程Winload.exe1.6 启动过程1.7 explorer.exe 2、Windows重要进程及组件2.1 注册表Services注册表服务管理器Services.mscsc.exe计划任务taskschd.msc计划任务schtask…

营销前瞻丨2024小红书「黑科技」数据报告

随着科技对人们日常生活的逐渐渗透&#xff0c;对有更高生活质量追求的人来说&#xff0c;产品的智能化、科技化程度已经成为影响他们消费决策的重要因素。 千瓜数据显示&#xff0c;小红书平台2024年1月到7月&#xff0c;“科技”相关种草笔记数较去年同期增长超140%&#xff…

HashMap线程不安全|Hashtable|ConcurrentHashMap

文章目录 常见集合线程安全性HashMap为什么线程不安全&#xff1f;怎么保证HashMap线程安全 HashtableConcurrentHashMap 引入细粒度锁代码中分析总结 小结 常见集合线程安全性 ArrayList、LinkedList、TreeSet、HashSet、HashMap、TreeMap等都是线程不安全的。 HashTable是线…

50ETF期权可以当天买卖吗?

今天期权懂带你了解50ETF期权可以当天买卖吗&#xff1f;期权日内交易指的是在一个交易日内买入和卖出期权合约&#xff0c;以从价格波动中获取短期收益。 50ETF期权可以当天交易 在这里&#xff0c;可以负责任的告诉大家&#xff0c;50ETF期权当天买入&#xff0c;也可以当天…

安泰电压放大器对参数的要求有哪些

电压放大器是电子电路中常见的一种基本电路&#xff0c;用于将输入信号的电压放大至更大的幅值输出。在设计和应用电压放大器时&#xff0c;需要考虑一系列参数来确保放大器的性能和稳定性。下面将详细介绍电压放大器对参数的要求。 电压放大器对增益的要求非常重要。增益是指输…

2024年6款强力电脑监控软件推荐

随着数字化办公的普及&#xff0c;电脑监控软件已成为企业管理和个人安全的重要工具。无论是企业主监控员工工作效率&#xff0c;还是家长防范孩子沉迷网络&#xff0c;强力的电脑监控软件都能提供有效的解决方案。本文将为您推荐6款功能强大且广受好评的电脑监控软件&#xff…

UDS 诊断 - RequestDownload(请求下载)(0x34)服务

UDS 诊断服务系列文章目录 诊断和通信管理功能单元 UDS 诊断 - DiagnosticSessionControl&#xff08;诊断会话控制&#xff09;&#xff08;0x10&#xff09;服务 UDS 诊断 - ECUReset&#xff08;ECU重置&#xff09;&#xff08;0x11&#xff09;服务 UDS 诊断 - SecurityA…

【Hot100算法刷题集】双指针-02-盛水最多的容器(含暴力枚举、双指针法及其合理性证明)

&#x1f3e0;关于专栏&#xff1a;专栏用于记录LeetCode中Hot100专题的所有题目 &#x1f3af;每日努力一点点&#xff0c;技术变化看得见 题目转载 题目描述 &#x1f512;link->题目跳转链接 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的…

Linux系统部署SmartKG(知识图谱安装)

基本要求 #docker需要高版本 Docker version 20.10.14, build a224086docker 20.10.14离线安装 SmartKG官网 官方详细文档 下载部署包 SmartKG官网 准备部署 #上传到服务器 [roottest-server01 opt]# ll SmartKG-master.zip -rw-r--r-- 1 root root 79708691 Sep 11 17:4…

网络层协议介绍

目录 一、网络层的功能 二、ip数据包格式 三、ICMP协议&#xff08;Internet控制报文协议&#xff09; 3.1功能 3.2 ping命令 3.2.1ping命令的用法 3.2.2扩展 3.3 tracert命令&#xff08;windows&#xff09; 四、arp协议 4.1ARP协议是如何工作的 4.2工作原理&#x…

解码未来:H.265与H.266技术对比及EasyCVR视频汇聚平台编码技术优势

随着视频技术的不断发展&#xff0c;视频编码标准也在不断更新迭代。H.265&#xff08;也称为HEVC&#xff0c;High Efficiency Video Coding&#xff09;和H.266&#xff08;也称为VVC&#xff0c;Versatile Video Coding&#xff09;作为当前和未来的主流视频编码标准&#x…

本地部署大语言模型详细讲解

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; 本地部署大语言模型&#xff08;LLM&#xff0c;Large Language Model&#xff09;需要相应的硬件资源和技术栈支持&#xff0c;如GPU计算能力、大量内存、存储空间&#xff0c;以及模型部署框架。以下是如…

46页PPT说清楚数据资产目录建设,数据资产目录建设方案

数据资产管理的必要性 为了更好地管理和利用这些资产&#xff0c;构建一个全面的数据资产目录变得至关重要。本方案旨在通过一系列策略和步骤&#xff0c;帮助企业实现数据资产的有效管理和利用。政策层面&#xff0c;数据已被纳入生产要素&#xff0c;强调了数据安全与保护的…

Qt 中openMp 配置

Qt 中openMp 配置 前言 openMP是使用CPU进行并行计算&#xff0c;在实际项目中处理耗时的for循环等&#xff0c;简单有效&#xff0c;本文记录下使用Qt \C项目开发时如何配置openMP 二、工程配置 1.Qt Creator pro工程 区分编译器&#xff0c;配置pro文件 MSVXXX编译器&am…

Adobe Firefly 视频模型测试版即将推出,具备文本、图像或视频添加元素的多种功能

Adobe Firefly Video 是一款由 Adobe 推出的新型人工智能视频生成模型&#xff0c;旨在为视频专业人士提供强大的创意工具&#xff0c;该模型计划在年底前推出。 演示视频在喜好儿网 Firefly Video 模型具备多种功能&#xff0c;包括从文本生成视频、图像生成视频或视频添加元…

I2C-Tools的安装与使用方法(详解,一篇教会你熟练使用)

1.前言&#xff1a; i2c-tools是一个开源的I2C总线工具集&#xff0c;它包括了用于访问和操作I2C设备的各种命令行工具。这些工具可以帮助用户读取和写入I2C设备的数据&#xff0c;检测和诊断I2C总线的问题等。 2.各系统的安装&#xff1a; 接下里会展示在不同操作系统中如何使…

00 目前大模型介绍

1 大模型种类 目前 主流的开源模型体系 分三种&#xff1a; 第一种&#xff1a; prefix Decoder 系 代表模型&#xff1a; ChatGLM 、ChatGLM2&#xff0c;第二种&#xff1a; causal Decoder 系 &#xff1a; LLaMA-7B 、 LLaMa 衍生物、Bloom,第三种&#xff1a;Encoder-De…

企业ESG表现、制造业的数字化转型及其高质量发展(2011-2022年)

在当今全球经济一体化的背景下&#xff0c;企业不仅要追求经济效益的最大化&#xff0c;还要关注环境、社会和治理&#xff08;ESG&#xff09;的表现&#xff0c;以及通过数字化转型实现高质量的发展。本文将基于2011-2022年的数据&#xff0c;探讨企业ESG表现与制造业数字化转…