如何在vueJs中不点击按钮的情况下在新标签页中打开页面

Question

我想在 Axios 响应成功后在新选项卡中打开页面链接，我已经搜索了有关它的解决方案，但浏览器一直阻止弹出窗口。 我已经尝试了下面的一个，但没有得到工作，并且在所有浏览器中都不支持

let newTab = window.open(); newTab.location.href = url;

Answer 1

_blank可以帮助您打开新窗口。 查看 w3school 上 window.open 函数的文档。 https://www.w3schools.com/jsref/met_win_open.asp

但出于安全原因，浏览器会阻止此类弹出窗口。 从用户安全的角度来看，这是默认和期望的行为。 您可以使用以下解决方案覆盖此设置。 https://blog.getadblock.com/how-to-disable-pop-up-blockers-in-every-browser-a1cccbae53e7

Answer 2

您可以使用_blank值将其指定为第二个参数：

let newTab = window.open(url,'_blank');

Answer 3

@Dhruti 如果所有其他方法都失败了，您仍然可以单击按钮触发新选项卡，只需隐藏按钮并使用 JavaScript 触发单击操作。 在 Vue 中给按钮一个 id 或 ref="somename"，以及一个类。 设置它的opacity: 0; 并将其放置在页面上不被注意的某个位置。 你甚至可以设置position: relative; （或绝对/固定）并给它一个z-index: 0; 或 -1，然后在您的 axios 响应之后，调用this.$refs.hiddenButton.click()确保您已在按钮上设置target="_blank" 。

*小费，
每次单击该元素时， target="_blank"将打开一个新选项卡。
target="blank" （无下划线）将在第一次打开一个新选项卡，然后在每次后续点击时重复使用该选项卡。