若依 通过this.$router.resolve 菜单跳转新窗口

常见vue 利用 $router 实现页面跳转的两种方式

//第一种
.vue
<router-link target="_blank" :to="{path:''}">

//第二种
.js
 let routeUrl = this.$router.resolve({
   		//路径
          path: '/indexplus'
          //需要传递的参数
          query:{
          }
        });
        window.open(routeUrl.href, '_blank');
需求

美好的一天从智慧填埋开始,
请添加图片描述
今天的需求,点击左侧菜单,弹出新的窗口,原来的窗口保持原来的页面不变。
请添加图片描述
第一时间我就想到了路由跳转,于是我在router.js中加入在这里插入图片描述
在菜单页面添加了

//Siderbar index.vue
 	     // 前端大屏新窗口 跳转
     	if (path == '/datav') {
 		let routeUrl = this.$router.resolve({
        	path: '/indexplus'
        });
        //新窗口打开页面
        window.open(routeUrl.href, '_blank');
        //原窗口保持原来的页面
        this.$router.go(-1);
        return 0;
      }

如果点击的 ‘可视化大屏’ (路由地址:datav),则就在新的窗口打开,原来的窗口保持原来的页面。

  • 8
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 27
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 27
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值