vue路由跳转打开新窗口和关闭窗口怎么实现

2023-04-13 17:13| 来源: 网络整理| 查看: 265

vue路由跳转打开新窗口和关闭窗口怎么实现发布时间：2023-04-13 16:37:05 来源：亿速云阅读：50 作者：iii 栏目：开发技术

本篇内容主要讲解“vue路由跳转打开新窗口和关闭窗口怎么实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue路由跳转打开新窗口和关闭窗口怎么实现”吧!

vue路由跳转打开新窗口和关闭窗口

需求：从当前页面跳转到其他页面时，打开一个新窗口

比如：点击页面上的用户反馈，打开用户反馈的新页面，要使用编程式导航

vue路由跳转打开新窗口和关闭窗口怎么实现

编程式导航

使用路由对象的resolve的方法解析路由，可以得到location、router、href等目标路由的信息，只要得到href就可以使用window.open打开新窗口了。

代码如下：

// 路由跳转新界面 userFeedback() { // this.$router.push({ path: '/feedback' }); 用push,也能实现跳转，但是不能打开新页面。 const { href } = this.$router.resolve({ path: '/feedback' }); window.open(href, '_blank'); },

如果是复杂的需要带参数跳转的路由，是以下写法，用query携带参数

详情 watchDetail(row) { const { href } = this.$router.resolve({ path: `/answerSituation`, query: { id: row.id, paperName: this.paperName, name: row.name, examScore: row.examScore, answersTime: row.answersTime } }); window.open(href, '_blank'); }window.open( )方法

定义和用法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法

window.open(URL,name,specs,replace)

第一个参数URL

可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

第二个参数name

可选。指定target属性或窗口的名称。支持以下值：

_blank - 在新窗口显示目标网页。这是默认

_self - 在当前窗口显示目标网页

_top - 框架网页中在上部窗口中显示目标网页(不常用)

第三个参数

可选参数，设置窗口参数，各参数用逗号隔开。

关闭窗口 window.close()

用法

window.close(); //关闭本窗口或者 .close(); //关闭指定的窗口

例子：关闭新窗口

var mywin=window.open('http://www.xxx.com'); //将新打的窗口对象，存储在变量mywin中 mywin.close();vue路由跳转打开新窗口(被浏览器拦截)

今天做了一个功能是点击按钮路由跳转打开新的窗口页面

第一种方法{ const routerdata = this.$router.resolve({ name: '组合分析以及组合持仓', params: { managerId: vals.fundCode } }) const newhref = routerdata.href + '?managerId=' + vals.fundCode window.open(newhref, '_blank') }) }

当我们用到第二种方法时候，是触发事件请求接口根据条件去判断在进行路由跳转，这个时候就会遇到浏览器被拦截的问题

在接口请求的回调函数中需要使用window.open（）打开新页面，但是等接口请求成功之后，window.open（）打开新页面总是被浏览器拦截，原因大概是，放在请求回调函数中的操作，被浏览器认为不是用户主动触发的事件，并且延迟1000ms ，被认为有可能是广告，于是被拦截

解决的方法：

在接口请求之前先打开一个空的页面

let tempPage=window.open('' ", _blank');

然后在回调函数中，

tempPage.location=url;第二种方法（改良版）查看 getGetMyPortfolioById(vals) { const tempPage = window.open('', '_blank') getMyPortfolioById({}).then(response = >{ const routerdata = this.$router.resolve({ name: '组合分析以及组合持仓', params: { managerId: vals.fundCode } }) const newhref = routerdata.href + '?managerId=' + vals.fundCode tempPage.location = newhref }) }

到此，相信大家对“vue路由跳转打开新窗口和关闭窗口怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

推荐阅读： vue的touchStart事件及click事件冲突的解决方案 Vue 移动端点击出现300毫秒延迟的问题怎么办

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

vue 上一篇新闻：js中怎么复制一个数组猜你喜欢 PHP获取2个时间点之间的年月一个胖子的paython之路（1）解决Flink反压的方法有哪些？ CAD显示图层（网页版）「Protocol_Buffer」之基本使用与格式定义 Ribbon如何负载均衡地消费microservice-provider-user composer出现404错误如何理解Angular服务 Angular 文档中链接的修改路径如何在java中调用kotlin代码

【本文地址】

公司简介

联系我们