游客发表

vue跳转网页

发帖时间:2026-10-17 04:44:55

vue-router的转网push方法是我用得最多的跳转方式。点击列表项,转网调一下this.$router.push('/detail'),转网页面就切过去了。转网但真正让我意识到跳转没那么简单的转网,是转网处理一个跨应用需求的那天。

业务方要求从我们的转网后台系统直接跳到另一个独立部署的报表平台,还要带上用户token。转网我第一反应是转网location.href,但马上被打脸——新窗口打开的转网需求,还有登录态传递的转网问题。直接拼URL?转网token明文暴露在地址栏里,安全测试那一关就过不了。转网

后来我改用window.open配合postMessage,转网报表平台监听消息后自己存sessionStorage。转网跳转是通了,但刷新页面就丢登录态,用户骂娘。当时我盯着代码想了很久,最后决定用vue-router的hash模式做桥梁——在路由表里加一个/redirect的空白页,跳转时先push到这个路由,在beforeRouteEnter里拿到query参数,再通过window.name把token传过去,最后用location.replace替换成目标地址。window.name在页面刷新后依然保留,这个冷门特性救了我一命。

还有一次是处理页面内嵌iframe的跳转。业务方想在一个tab里展示另一个vue项目的页面,但那个项目用的是history模式。直接<router-link>肯定不行,因为iframe的src是独立地址。我最后是动态创建一个form表单,用post方式提交到目标地址,把参数放在body里。这样既绕开了get请求的长度限制,也避免了浏览器对url编码的干扰。提交完用target="_blank"指向iframe的name属性,页面就乖乖在iframe里渲染了。整个过程像在搞浏览器hack,但确实解决了实际问题。

别迷信vue-router能搞定一切跳转。它处理应用内部状态切换很顺手,但碰到跨域、跨应用、带敏感信息传递的场景,你得回到原生web技术里找答案。我后来总结了个土办法——先问自己三个问题:目标页面在不在同一个router实例里?需不需要浏览器刷新?参数能不能见光?如果有一个答案是否定的,就别再用push了。

现在我做跳转前会先看一眼地址栏。如果跳转后URL里出现#/,说明还在vue-router的控制范围内;要是直接变成http://开头,那就要检查有没有触发整页刷新。真正的跳转高手,是知道什么时候该用router,什么时候该让路由滚蛋,直接操作window.location。这不是技术选型,是对浏览器工作方式的理解。

    热门排行

    友情链接