vue实现页面传参的方式,vue 打开新窗口
本文主要介绍vue打开新窗口，实现参数传递的相关信息。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
我想实现的功能是打开新窗口显示新页面，需要传参数，地址栏显示不出来。当我刷新页面时，传递的参数不能丢失，应该一直存在，除非我手动关闭这个新窗口，也就是浏览器的标签页。
通过百度定向编程，发现这种效果在网上根本达不到，还是个坑。明明实现不了，还像有事一样写出来。所以我特意在标题里加了一张有真相的图。如果我没骗你，达不到功能，你就别出来忽悠人了。
先写我做过的代码，再介绍别人实现不了的坑，这方面要注意什么。
打开一个新窗口并传递引用代码。
//打开一个新窗口并传递参数。参数不能显示在地址栏中。如果你不关闭窗口，它将总是被刷新，参数将总是有效的。
handleWindow() {
//主要实现打开新窗口的功能
var route=this。$router.resolve({
名称： Xterm ，
})
//主要实现存储参数的功能。
sessionStorage.setItem(ip ， 1 . 1 . 1 . 1 )；
window.open(route.href， _blank )
}
我的路线已配置并发布。
{
路径：“/xterm”，
隐藏：真实，
component:()=import( @/views/monitor/xterm/index )，
名称： Xterm ，
},
现在是页面接收参数。
//vue的初始化方法。一旦页面被初始化，就获取参数。
已创建(){
alert(session storage . getitem( IP ))；
this . IP=session storage . getitem( IP )
},
贴一张真相图
这是通过打开一个新的vue窗口，并通过sessionStorage传递参数。为什么只能这样做才能实现这个功能？我来说说我踩坑的事。人群中有坏人在网上用假代码骗人。哪个码农经不起这样的考验？
首先，这个功能需要打开一个新窗口，所以有三种方式：
第一种：通过router-link标签，我个人不太喜欢，对于简单的业务场景勉强可以接受，但是要处理很多业务，参数很多，不利于业务发展。直接排除，出局！
第二种方法：通过router.replace方法，该方法通过用要跳转到的B页替换当前A页来打开窗口。我打开新窗口看到新的东西，这很好。就让我上一页消失吧。那不是他妈的？我的实验结束后，出去！
第三种方法：通过router.resolve方法，这是在不影响当前A页的情况下打开一个新窗口，直接打开一个浏览器标签页。我可以通过来回切换标签来查看两个页面的信息数据。这很好。我喜欢。这就是了。
顺带一提，vue2.0之后，为了和越来越流行的HTML5保持一致，router.go和router.push不支持新窗口打开的属性，router.go作为前进后退；Router.push用作特殊页面的向导。这种不会打开新窗口的跳转具有历史功能。如果一个窗口有多个标签页，可以用这个打开多个标签页，如图；
好，使用router.resolve，我们可以跳到新窗口，然后我们现在开始传递引用，这就是我们被困的地方。根据网上交通，主要有以下两种参考：
//测试第一个参数。
testA (aaa) {
恒定路线=this。$router.resolve({
名称： Xterm ，
参数：{
ip: aaa
}
})
window.open(route.href， _blank )
}
//测试第二个参数。
种皮(bbb) {
恒定路线=this。$router.resolve({
路径：“/xterm”，
查询：{
ip: bbb
}
})
window.open(route.href， _blank )
}
对应的接收参数，如下图所示；
已创建(){
//测试第一个参数。
this.ip=this。$route.params.ip
//测试第二个参数。
this.ip=this。$route.query.ip
},
测试的结果是，第一个永远得不到值，第二个在地址栏中公开传递的参数值。即使第一个经历了各种特殊处理，最好的结果也只是第一次得到值。刷新页面后，该值将会丢失。如何做到这一点？谁能保证用户不会觉得有点卡，然后顺手点了刷新键。router.push中的这种参数传输完全没有问题，可以接收。不同的是名称params组合，参数不会在地址栏，刷新后数据会消失；路径查询组合传递参数，参数会在地址栏中。无论您如何刷新页面，这些值都将一直存在。估计用push试过之后，自然觉得resolve也是一样的。看了很多博客都是不通过地址栏，而是用第一个，然后根本不成功，点击量高，想哭。
没办法，我得自己来。我查看了缓存，找到了localStorage和sessionStorage的属性。sessionStorage用于临时保存数据，关闭窗口或选项卡后，数据将被删除。LocalStorage用于长期存储整个网站的数据，存储的数据没有过期时间，直到手动删除。显然，sessionStorage也可以。
支持这两种属性的浏览器版本如下：
至此，其实问题已经解决了。其实也不复杂，就是网上的答案良莠不齐，录下来给别人用。
总结
关于vue打开新窗口，实现参考的这篇文章到此结束。有关vue打开新窗口的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。