Vue路由跳转打开新的页面并传参

Vue路由跳转打开新的页面并传参

这是我在做项目时碰到的一个需求，需要打开新的页面同时传递当前页面的一些信息作为新页面接口请求的参数。
一说到跳转打开新页面是不是瞬间就想到了a标签，超链接<a href="https://baidu.com" title="百度" target="_blank">百度</a>; 又或者说js方法window.open("https://baidu.com");当然这两个方式无疑于十分简单方便，但此时需要的时路由间的跳转，只需要改变路径名，这种需要输入链接全部的方法就会显得有些繁琐并且容易出错。
言归正传，下面介绍我找到的两种方法：
1.由a标签延申过来的，vue-router内置的一个新的标签<router-link>,它同a标签一样添加属性 target="_blank" 就可以重新打开一个新的页面，只不过它不需要链接全部，需要路径信息，同时它也可以传递参数

<router-link :to="{name:'equipment/tag',query:{tag:'list'}" targer="_blank" >设备标签</router-link>

其中name是路径名，query是参数

2.通过router的内置方法来实现，使用resolve方法将路径转换出来，window来打开

const icardUrl = this.$router.resolve({
      path: '/icardManage/cardManage',
      query: {
            iccid: this.queryData.iccid,
           },
      })
window.open(icardUrl.href, '_blank')

这两种方式打开新页面后，我们可以根据this.$route.query来获取传递过来的参数