526互联

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

发布时间 2023-05-09 10:17:06作者: jiduoduo

一个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