vue解决打开新窗口被浏览器拦截的问题；解决vue打开新窗口被浏览器拦截的问题

首先，我们先来说一下在什么情况下，新窗口会被阻截，以及阻截的原因。
当使用 window.open(url,“_blank”)打开新窗口时，如果url是通过ajax从后台获取
到的时候，浏览器就会出现拦截的问题。
因为，当浏览器检测到非用户操作产生的新弹出窗口，则会对其进行阻止。因为浏览器认为这可能是一个广告，不是一个用户希望看到的页面。

那么，我们就要考虑，如何才能将ajax请求的url，不被浏览器拦截呢？
我之前也看过很多方法是说，先在发送ajax之前，打开一个空白页，然后，再将ajax获
取到的url赋给新打开的空白窗口，确实，这样解决了上面说的问题，但是我认为，这样的体验并不好，因为如果，在网速比较慢的情况下，ajax请求的时间过长，url长时间不能赋值，新窗口就会出现空白时间过长的问题。这样用户就可能将空白页手动关掉，从而就会出现一系列的问题。

那么，还有什么方法可以解决呢？ 好了，重点来了（此处方法是基于vue的，其他框架或源生，思路是一样的，可以自行研究）
上边我们说了，通过ajax获取到的url，会被浏览器判定为不安全链接，被拦截，那么我们还有没有其他办法呢？当然！前几天，我在一个项目中看到过一个这样的需求，点击按钮，发送ajax，请求一个远程连接的url，将获取到的url放在一个弹框中显示，然后，再点击这个url连接，跳转至这个url页面。这时，我发现，并没有被浏览器拦截，因为这个url，不是直接从ajax获取到的，而是，先通过ajax获取一个url赋值给一个参数，然后点击链接时，将那个参数赋值给window.open（url，“_blank”）中的url。
然后，我便想到了，如果我也将ajax获取到的url赋值给一个固定的参数，然后，我们在watch方法中（vue监听的方法）监听这个参数，当这个参数发生变化时直接跳转就可以了。

data() {
   	return {
        newWin:''
    }
},
watch:{
	newWin(){
	   	window.open(this.newWin,"_blank")
	}
},
methods:{
	// 点击发送ajax获取url的事件
	async getUrl(){
		const { data:res } = await this.getRequest('XXXXXXXXXX',{
            XXX：XXXXX
        })
        this.newWin = res.data.url
	}
}

原文链接：https://blog.csdn.net/weixin_43834376/article/details/89306199