vue-router + el-menu

server/2024/9/22 12:21:17/

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.ppmy.cn/server/117526.html

相关文章

四、(JS)JS中常见的加载事件

一、文档加载监听 &#xff08;1&#xff09;抛出疑惑&#xff0c;什么是文档加载监听&#xff1f;为什么要有这个东西&#xff1f; 老样子&#xff0c;我们先讲一个场景&#xff0c;带着大家熟悉为什么会有文档加载监听&#xff0c;是来解决什么问题来着的。 我们先看下这段…

使用QT编写有图形界面的TCP局域网聊天室(app)

服务器&#xff1a; 实现方法&#xff1a; 1.使用QTcpServer类实例化一个对象&#xff0c;就得到了一个服务器端 2.调用该类对象的成员函数 listen 将服务器启动监听&#xff0c;该函数会进行绑定ip和端口号 ip地址可以指定也可以由系统自动绑定&#xff0c;端口号也可以自…

Vue 中常用的基础指令

一. 什么是 Vue 指令 指令的定义和作用 指令是通过 Vue 实例的directives选项进行定义的。在指令的定义中&#xff0c;需要提供一个bind函数&#xff0c;它在指令第一次绑定到元素时被调用&#xff0c;可以执行一些初始化的操作。还可以提供update函数&#xff0c;它在指令所…

PHP函数如何传递数组参数

php 函数可以使用数组参数传递大量数据。语法&#xff1a;参数类型前加上方括号 ([])。例如&#xff1a;myfunction(array $arr)。实战案例&#xff1a;计算数组元素平均值。注意&#xff1a;数组参数默认为引用传递&#xff0c;类型提示可提高代码可读性&#xff0c;数组解构可…

【网络安全】-文件上传漏洞

文件操作漏洞包括文件上传漏洞&#xff0c;文件包含漏洞&#xff0c;文件下载漏洞。 文章目录 前言 什么是文件上传漏洞&#xff1f; 文件上传的验证与绕过&#xff1a; 1.前端js验证&#xff1a;   Microsft Edge浏览器&#xff1a; Google Chrome浏览器&#xff1a; 2.后端…

el-table表格的展开行,初始化的时候展开哪一行+设置点击行可展开功能

效果&#xff1a; 表格展开行官网使用&#xff1a; 通过设置 type"expand" 和 Scoped slot 可以开启展开行功能&#xff0c;el-table-column 的模板会被渲染成为展开行的内容&#xff0c;展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。 但是这种方法…

MyBatis中多对一关系的三种处理方法

目录 MyBatis中多对一关系的三种处理方法 1.通过级联属性赋值 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 2.通过标签 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 3.分步查询 …

PPT技巧:如何在幻灯片中生成目录?

PPT文件如何制作目录&#xff0c;如何点击目录标题立即跳转到相应幻灯片&#xff1f;今天小奥超人和大家一起来学习一下。 现在幻灯片里制作好目录页&#xff0c;制作好目录之后&#xff0c;选中一个目录&#xff0c;点击插入 – 链接 在插入链接界面中&#xff0c;选择【本文…