您好,登录后才能下订单哦!
本篇内容主要讲解“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携带参数
<template slot-scope="scope"> <el-button size="small" @click.stop="watchDetail(scope.row)">详情</el-button> </template>
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'); }
定义和用法
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
语法
window.open(URL,name,specs,replace)
第一个参数URL
可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口
第二个参数name
可选。指定target属性或窗口的名称。支持以下值:
_blank
- 在新窗口显示目标网页。这是默认
_self
- 在当前窗口显示目标网页
_top
- 框架网页中在上部窗口中显示目标网页(不常用)
第三个参数
可选参数,设置窗口参数,各参数用逗号隔开。
用法
window.close(); //关闭本窗口 或者 <窗口对象>.close(); //关闭指定的窗口
例子:关闭新窗口
var mywin=window.open('http://www.xxx.com'); //将新打的窗口对象,存储在变量mywin中 mywin.close();
今天做了一个功能是点击按钮路由跳转打开新的窗口页面
<router-link target="_blank" :to="{path:'/FundManger/FundProductMoney', query:{managerId:fundcode}}></router-link>"
<a @click="getGetMyPortfolioById(scope.row) ">查看</a> getGetMyPortfolioById(vals) { getMyPortfolioById({ }).then(response = >{ 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;
<a @click="getGetMyPortfolioById(scope.row) ">查看</a> 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路由跳转打开新窗口和关闭窗口怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。