vue 路由跳转打开新窗口被浏览器拦截问题处理

触发事件请求接口根据条件去判断在进行路由跳转：

  <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 路由跳转打开新窗口被浏览器拦截问题处理的文章就介绍到这了,更多相关vue 路由跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue子路由跳转实现tab选项卡效果

    vue子路由跳转实现tab选项卡效果

    tab选项卡的布局在项目中是很常见的,在后台管理系统中左边是导航栏固定,右边是对应的页面,每次点击左边的标题,只有右面的对应页面在切换,而vue要做tab选项卡,推荐使用实现a标签的效果,然后使用实现插槽的效果,把对应的页面 “塞” 进去,具体实现看下面的案例: vue文件 <template>     <div class="box">         <!-- nav标题,路由指向 -->        <div class="l

  • vue 路由视图 router-view嵌套跳转的实现

    vue 路由视图 router-view嵌套跳转的实现

    目录 1.修改app.vue页面 2.创建登录页面(/views/login/login.vue) 2.1.在router/index.js中添加登录页面路由 3.创建主页面(/components/index.vue) 3.1.创建主页面路由 4.修改首页 4.1.开启菜单路由模式,并修改菜单跳转路径 4.2.添加router-view 5.创建两个子页面 目的: 实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的

  • Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新 一.背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新. 也就是vue生命周期函数没有执行(created.mounted钩子函数). 案例: A页面: B页面: 问题: 当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行. 二.解决方法: 1.使用activated:{}周期函数代替mounted:{}函

  • vue路由相对路径跳转方式

    vue路由相对路径跳转方式

    目录 vue路由相对路径跳转 1.append 属性 2.router.resolve方法 vue router动态路由点击跳转路径地址重复追加 在练习写vue router动态路由时碰到的问题 vue路由相对路径跳转 今天写东西遇到多层路由,路由之间跳转时需要相对路径,因此查了一下官网用到了append属性和router.resolve方法,因此列出具体的使用方法. 1.append 属性 设置 append 属性后,则在当前 (相对) 路径前添加基路径. 类型:boolean 默认值:fal

  • vue中路由跳转的方式有哪些你知道吗

    目录 第一种方式:router-link (声明式路由) 第二种方式:router.push(编程式路由) 第三种方式:this.$router.push() (函数里面调用) 第四种方式:this.$router.replace() (用法同上,push) 参考: 总结 第一种方式:router-link (声明式路由) 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/

  • vue路由拦截及页面跳转的设置方法

    路由设置:router/index.js export default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条,进入页面前判断是否需要登陆 }, component: selfcenter } ] }) main.js: /* eslint-disable no-new */ router.beforeEach((to, from, ne

  • vue 路由跳转打开新窗口被浏览器拦截问题处理

    触发事件请求接口根据条件去判断在进行路由跳转:   <a @click="getGetMyPortfolioById(scope.row) ">查看</a>    getGetMyPortfolioById(vals) {      getMyPortfolioById({       }).then(response = >{          const routerdata = this.$router.resolve({             

  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    目录 vue路由跳转打开新窗口和关闭窗口 编程式导航 window.open( )方法 关闭窗口 window.close() vue路由跳转打开新窗口(被浏览器拦截) 第一种方法 第二种方法 第二种方法(改良版) 总结 vue路由跳转打开新窗口和关闭窗口 需求:从当前页面跳转到其他页面时,打开一个新窗口 比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航 编程式导航 使用路由对象的resolve的方法解析路由,可以得到location.router.href等目标路由的信息,只

  • Ajax打开新窗口被浏览器拦截的两种解决办法

    最近在做支付时发现打开支付窗口时被浏览器拦截了,百度了一下才发现是因为打开窗口前用ajax验证是否能支付,所以不是用户主动触发的打开ixin窗口,浏览器认为这样不安全,所以给拦截了. 解决办法一 先开始打开一个空的新窗口,然后改变新窗口的url,具体代码为 var wd = window.open(); $.ajax({ type: "POST", dataType: "json", url: URL, data: {orderNo:orderNo}, succes

  • vue单页面应用打开新窗口显示跳转页面的实例

    一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要. 一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定: this.$router.push({name: 'abc'}) 以上是常规的通过路由的页面跳转方法. 我们现在的需求是另外开启一个新页面来显示跳转到的页面,原本的窗口保持页面不变. const { href } = this.$router.resolve({ name: 'abc' }) window.

  • ajax回调打开新窗体防止浏览器拦截有效方法

    ajax回调打开新窗体防止浏览器拦截,就这么做! 问题剖析: function click_fun(){ window.open("www.baidu.com");//能打开 $.ajax({ 'url': '${pageContext.request.contextPath}/activity/savePrizes.htm', 'type': 'post', 'dataType': 'json', 'data': data, success: function (data) { wi

  • vue打开新窗口并实现传参的图文实例

    vue打开新窗口并实现传参的图文实例

    我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页. 通过面向百度编程,发现网上的根本达不到这个效果,而且还都是坑,明明实现不了,还若有其事的写出来,于是我在标题特意加上有图有真相,诚我不欺,实现不了功能,就不要出来糊弄人. 先把我做好的代码写出来,后面再介绍别人实现不了的坑,以及这方面相关要注意的. 打开新窗口并传参代码 //打开新窗口并传参,参数不能显

  • javascript打开新窗口同时关闭旧窗口

    其实这个问题和浏览器的版本息息相关,作为菜鸟的我,直到现在也没有找到完美的解决办法.没办法,因为业务必须要实现,所以只好用另一种方法去做了:通过重定向URL实现打开新窗口的同时"关闭"旧窗口 test1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> test1 </TITLE>

  • vue路由跳转router-link清除历史记录的三种方式(总结)

    目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo

  • Vue路由跳转方式区别汇总（push，replace，go）

    目录 声明式导航router-link 1. 不带参数 2.带参数 编程式导航 1.this.$router.push 2.this.$router.replace 3.this.$router.go(n) 总结区别: 在浏览器中,点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击 a标签链接.vue项目中点击router-link标签链接都属于声明式导航.在浏览器中,调用API方法实现导航的方式,叫做编程式导航.例如:普通网页中调用location.href跳转到新页面的方式,属于编

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

随机推荐