vue打开新窗口并传参的实现操作说明

发布时间：2022-02-21 15:25 所属栏目：13 来源：互联网

导读：这篇文章主要介绍如何实现vue打开新窗口并传参，实现的具体功能就是打开一个新的窗口展示页面，同时需要传参数，但是参数不能显示在地址栏，而且刷新页面后，传的参数不会丢失。下面通过图文形式给大家分享一下如实现上述操作。打开新窗口并传参代码 //打开

这篇文章主要介绍如何实现vue打开新窗口并传参，实现的具体功能就是打开一个新的窗口展示页面，同时需要传参数，但是参数不能显示在地址栏，而且刷新页面后，传的参数不会丢失。下面通过图文形式给大家分享一下如实现上述操作。

       打开新窗口并传参代码

//打开新窗口并传参，参数不能显示在地址栏里面，不关闭窗口一直刷新，参数一直有效
handleWindow() {
//主要实现打开新窗口的功能
var route = this.$router.resolve({
name: 'Xterm',
})
//主要实现存储参数的功能
sessionStorage.setItem("ip", "1.1.1.1");

window.open(route.href, '_blank')
}
我的路由配置，也贴出来好了

{
path: '/xterm',
hidden: true,
component: () => import('@/views/monitor/xterm/index'),
name: 'Xterm',
},
       现在是页面接收参数

//vue的初始化方法，页面一初始化，就去拿参数
created() {
alert(sessionStorage.getItem("ip"));
this.ip = sessionStorage.getItem("ip")
},
       贴个真相图

       这是通过vue的打开新窗口，通过sessionStorage传参拿参数。为什么只能这么做，才能实现这个功能，下面我讲一下我的踩坑历程。群众里有坏人，拿个假代码来网络上骗人，哪个码农经不起这样的考验？

       首先这个功能需要打开新窗口，那么方式有如下3种；

       第一种：通过<router-link>标签，这种标签的写法我个人很不中意，对于简单的业务场景还勉强可以，但是我要处理一堆业务，很多个参数的，这种标签的写法很不利于业务拓展。直接排除，OUT！

       第二种：通过router.replace方法，这种方法的打开窗口，是把当前A页面替换成要跳转过去的B页面，我打开新窗口是想看新东西，这倒好，直接让我之前的页面没了，这不操蛋嘛？在我实验过后，OUT！

       第三种：通过router.resolve方法，这就是打开新窗口，不影响当前A页面，直接打开一个浏览器标签页，我可以通过来回切换标签页，来看两个页面的信息数据。这很nice，我中意，就是这个了。

       好了，使用router.resolve，我们可以跳转到新窗口里，那么现在就开始传参了，这就到了坑爹的地方了。按照网上的搬运来看，主要是如下两种传参；

//测试第一种传参
testA (aaa) {
const route = this.$router.resolve({
   name: 'Xterm',
   params: {
     ip: aaa
   }
})
window.open(route.href,'_blank')
}

//测试第二种传参
testA (bbb) {
const route = this.$router.resolve({
   path: '/xterm',
   query: {
     ip: bbb
   }
})
window.open(route.href,'_blank')
}

       对应的接收参数，如下所示；

created() {
//测试第一种接参
this.ip = this.$route.params.ip
//测试第二种接参
this.ip = this.$route.query.ip
},

       没办法，只能自己动手了，找了找缓存啥的，发现localStorage 和 sessionStorage 属性，sessionStorage 用于临时保存数据，在关闭窗口或标签页之后将会删除这些数据；localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。显而易见，sessionStorage 就可以了。

       总结

       以上就是关于vue打开新窗口并传参实现操过程，上文展示了详细的代码以及效果，希望对大家学习vue有所帮助。

（编辑：ASP站长网）