首页 > 其他分享 >vue 导致el-menu高亮会失效的问题

vue 导致el-menu高亮会失效的问题

时间:2023-05-09 10:25:54浏览次数:45  
标签:el vue 高亮 menu window params query router path

一个router转到另一个router常用的方法:

this.$router.push({path:'',params:{}});

this.$router.push({path:'',query:{}});

这种方式传参都是可以接收到的。但是有个问题,导致中的el-menu不能高亮显示,进行跟踪以后会现:default-active与router的index都是一致。

但就是不能高亮,除非新开窗口才可以显示高亮。

 

那这样的话,传值就会有问题,不管是$store, 还是params/query都是有问题的。

 

所以一定要用window.open来打开。下面是处理方法,来自下面的链接中。

方法一

1、页面1,比如有个按钮,那么点击处理即可。

const routeData = this.$router.resolve({
  path: '',      //跳转目标窗口的地址
  query: {
      name: zhangsan     //括号内是要传递给新窗口的参数
   } 
})
window.open(routeData.href)
)

2、转到的path的页面中进行接收

mounted() {
  this.$nextTick(function() {
    window['getData'] = (val) => {
      this.name = val
    }
  })
}

方法二

1、页面1,比如有个按钮,那么点击处理即可。

let params = 'message'
const routeData = this.$router.resolve({
  path: '',      //跳转目标窗口的地址
  query: {
      params    //括号内是要传递给新窗口的参数
   } 
})
window.open(routeData.href)

2、转到的path的页面中进行接收

 

mounted() {
  console.log(this.$route.query) // 输出为:{params:"message"}
  console.log(this.$route.query.params)  // 输出为:message
}

方法二,采用了这种,可以。

实际上上面的并不能满足我的要求,直接通过query/params传参的话,点一下导航中的菜单,参数就会丢失。

所以采用的是动态路由处理,比如/abc/:param1,这样就可以解决。

参考:

https://huaweicloud.csdn.net/63a00404dacf622b8df90f75.html

标签:el,vue,高亮,menu,window,params,query,router,path
From: https://www.cnblogs.com/jiduoduo/p/17384073.html

相关文章

  • vue中关于赋值的坑
    在使用弹窗展示表格数据详情的时候,由于字段名都取一样的,在详情弹窗页面,不会在data中去特意定义每个字段名。直接用上个页面的传值,通过赋值让值直接显示:比如:this.ruleForm=data如果,在你需求中没有清空或者更改data中数据或许并不会产生问题。但如果在这个页面需要对数值进行......
  • Laravel10 Auth 多用户(管理员、用户的区分)
    参考https://learnku.com/docs/laravel/10.x/authenticationmd/14876#retrieving-the-authenticated-user环境软件/系统版本说明windows10php8.1.9-Win32-vs16-x64composer2.5.5laravel10.8.0mysql8.0.28注意如果需要使用密码功能,还需......
  • 关于vue中动态路由404 为什么要放最下面
    在vue在路由匹配机制中,对路由的匹配是从上到下的,通常使用{path:'*',redirect:'/404',hidden:true}进行404页面跳转,*代表获取所有路径标识,如果放在前面就会提前进行匹配到404页面,从而无法匹配到正确页面。所以我们需要将其放在最后,只有当页面不存在的时候再去匹配404页面,进......
  • vue中 vuex踩坑笔记-刷新后动态路由不渲染
    在vue中,vuex经常用于存储公共状态,特别是在登录的时候获取token再保存,这个时候如果是做的动态路由,由于vuex的特性在你刷新后会清除你的所有操作的存储。这时候,存储的token和动态路由都会被清掉。如何解决这个问题:1.结合session或者cookie(通常用这个),token保存的时候,除了在vuex中......
  • C# 窗体控件ContextMenuStrip下拉项之间的分割线
    1.效果如图: 2.选中ContextMenuStrip控件,在Items属性中添加Separator 3. (其中第3,4步,通过上下箭头,摆置好你要分割的位置)原文链接......
  • 高维数据惩罚回归方法:主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数
    全文链接:http://tecdat.cn/?p=23378最近我们被客户要求撰写关于高维数据惩罚回归方法的研究报告,包括一些图形和统计输出。在本文中,我们将使用基因表达数据。这个数据集包含120个样本的200个基因的基因表达数据。这些数据来源于哺乳动物眼组织样本的微阵列实验1介绍在本文中,我......
  • Celery
    Celery一、什么是Celery?Celery是一个简单、灵活且可靠的,处理大量消息的分布式系统专注于实时处理的异步任务队列同时也支持任务调度二、Celery架构Celery的架构由三部分组成,消息中间件(messagebroker),任务执行单元(worker)和任务执行结果存储(taskresultstore)组成。1、消息中......
  • shell脚本
    1.检测httpd软件是否安装,没有的话则安装2.判断80端口的状态,未开启则重启  3. 4.编写监控脚本,如果根分区剩余空间小于10%内存的可用空间小于30%向用户egon发送告警邮件,邮件的内容包含使用率相关信息 5.检测指定的主机是否可以ping通,必须使用$1变量 6.判断一个......
  • 通过 PowerShell 删除所有running状态的flow
    我们经常会出现流出现多个running并且run不完的情况下。并且积攒过多会导致降速问题。所以我们可以通过powershell来运行cancel这些running状态运行。  首先我们要安装NPM,并且运行npmi-g@pnp/cli-microsoft365  安装成功之后,我们要登陆m365login 这里......
  • CodeForces - 630F Selection of Personnel (组合数学)
    TimeLimit: 500MS MemoryLimit: 65536KB 64bitIOFormat: %I64d&%I64uCodeForces-630FSelectionofPersonnelSubmit StatusDescriptionOnecompanyofITCitydecidedtocreateagroupofinnovativedevelopmentsconsistingfrom 5 to 7 peopleandhir......