vue里使用$router.push打开新窗口

最新推荐文章于 2024-09-29 20:08:15 发布

原创最新推荐文章于 2024-09-29 20:08:15 发布 · 9.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

VUE 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了在Ant-design-vue的多级菜单中，如何通过监听路由来实现在特定路径下打开新窗口的功能。开发者遇到不能直接替换组件的问题，于是采用watch监听路由，当路由匹配到特定路径时，使用$router.push保持当前页面状态，并通过window.open打开新窗口达到目标。

项目需求

1、多级菜单里面配置了一个跳转的页面路由，这里希望跳转并打开新窗口；
2、因为是用了Ant-design封装好的路由组件import Menu from 'ant-design-vue/es/menu'替换不了代码，所以换了个思路
3、使用watch监听当前路由path，若当前path=xx，就跳转并打开新窗口

实现代码

watch: {
	/** 数据共享门户 打开新窗口*/
      '$route'(to, from) {
        if(to.path === '/xxName') {
          this.$router.push(from.path) // 当前路由停留在当前页面，选中效果还停留在上一次点击的路由上
          let routeData = this.$router.resolve({ path: '/xxName' }); 
          window.open(routeData.href, '_blank');
        }
      },
}

主要代码

let routeData = this.$router.resolve({ path: '/xxName' }); 
window.open(routeData.href, '_blank');