首页 > 其他分享 >el-menu 切换子路由的时候仍保持激活状态

el-menu 切换子路由的时候仍保持激活状态

时间:2024-02-19 15:13:50浏览次数:26  
标签:el menu route 激活状态 路由 matched

使用element中的el-menu时候,我们使用路由高亮显示的时候,使用router 模式和default-active

当我们点击左侧菜单栏中的子路由时候,页面路由发生变化,左侧路由的选中状态就会消失,不会仍然保持选中。 我们可以通过route.matched来寻找当前子路由的上机路由,

route.matched含义是与给定路由地址匹配的标准化的路由记录数组。就是有几级就记录几级,根据自己路由情况来获取对应的路由

<el-menu
 :default-active="activeMenu"
  class="el-menu-vertical-demo"
  active-text-color="#007DED"
  router
 >
  <el-menu-item index='/menu'></el-menu-item>
</el-menu>
import {useRoute,onBeforeRouteUpdate} from 'vue-router'
const route = useRoute();
onMounted(()=>{
  activeMenu.value = route.matched[2].path //数组的下标需要根据自己的路由的等级来判断
})
​
onBeforeRouteUpdate((routeInfo)=>{
  activeMenu.value = routeInfo.matched[2].path
})

标签:el,menu,route,激活状态,路由,matched
From: https://www.cnblogs.com/ximenchuifa/p/18021131

相关文章

  • 06 高级应用-Redis Sentinel 和高可用性
    在Redis的应用中,高可用性是一个重要的考虑因素。RedisSentinel提供了监控、通知、自动故障转移和服务发现的机制,确保Redis的高可用性。以下是关于RedisSentinel的详细介绍:RedisSentinel的主要功能监控:Sentinel不断检查Redis主服务器和从服务器是否正常运行。通......
  • vite+vue3+ts+ element-plus 5分钟快速搭建高端大气上档次的企业级网站前端框架
    原文地址:https://mp.weixin.qq.com/s/BANsRtNn5u-4521nFwF3FA一、安装需要的包:1、 element-plus 安装命令:npminstallelement-plus--save  2、vue-router安装命令:npminstallvue-router --save  安装完成后,需要到main.ts注册:import{createApp}from......
  • hello_lua
    https://github.com/norman/hello-luahello_lua2libnativefunc.c#include<lua.h>#include<lauxlib.h>staticintl_mult50(lua_State*L){doublenumber=luaL_checknumber(L,1);lua_pushnumber(L,number*50);return1;}intluaopen......
  • selenium使用已打开的浏览器
    最后更新:2024.02.19python版本:3.12selenium版本:4.16.0在写selenium的时候,调试网页每次都需要新建一个浏览器实例,再打开网页进行操作,比较费时,尤其是在当网页加载特别慢的情况下;使用 ChromeDevTools协议就可以让selenium直接使用当前已经打开的处于远程调试的浏览器实例,以下......
  • FileZilla 服务器 报Warning: FTP over TLS is not enabled, users cannot securely l
    FileZilla服务器报Warning:FTPoverTLSisnotenabled,userscannotsecurelylogin.1.登录至FTP服务器 2.选择编辑->设置->SSL/TLS设置->。。。。。[看图操作],注:证书导出路径不能有中文字符 3.选择编辑->设置->SSL/TLS设置->选择上一步操作导出的证书,注意导出......
  • Netlify、Vercel 和 Digital Ocean代码托管平台介绍
    Netlify、Vercel和DigitalOcean都是用于部署Web应用程序的平台,它们各有特点和适用场景:Netlify:Netlify是一个现代化的静态站点部署平台,它提供了简单易用的界面和强大的功能,特别适合部署静态网站、单页面应用和Jamstack应用。Netlify提供了自动构建、部署、CDN加速......
  • python+selenium基础语法
    一、执行环境Python3.12.0selenium3.14.0二、八大元素定位//示例:打开百度,输入123,点击搜索fromseleniumimportwebdriverfromtimeimportsleepfromselenium.webdriver.common.byimportBydeftest():driver=webdriver.Chrome("D:/driver/chromedri......
  • 免费xshell和xftp下载使用
    背景:最近xshell老是跳出提示说要更新,于是最终没忍住,就更新了,下班后关了机,今天一点进去的时候,不能用了!网上搜了搜,有说提供xshell激活秘钥的,有提供百度网盘地址让我下载的,折腾一通下来,我的C盘不知道咋就红了,还时不时冒出来一些游戏的页面。忍住,忍住没去找师父,然后找到了师父之前......
  • Elasticsearch
    1,Elasticsearch简介1)分布式实时文件存储,可以将每一个字段都编入索引,使其可以被检索2)可以作为一个大型分布式集群(数百台服务器)技术,处理PB级数据3)Elasticsearch不是什么新技术,主要是将全文检索、数据分析以及分布式技术,合并在了一起,才形成了独一无二的ES2,基本概念1)Node(节点):Ela......
  • 关于java代码Runtime.getRuntime().exec()执行shell脚本中的坑
    java操作shell脚本执行docker命令  Runtime.getRuntime().exec()是不能执行特殊符号如">"、"|"等必须通过"/bin/sh""-c"处理。另外java操作docker 不能分配  dockerexec-i(不要t).另外如果不确定脚本是否执行成功,可以通过waitFor返回的int结果,如果为0脚本执行......