vue.js开发抓信插件,如何在单页应用中打开新窗口

在vue项目中实现跳转到一个新窗口,有两个方法:
1、<vue-link>标签实现新窗口打开
官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持 target="_blank" 属性的(tag="a"),如下:

<router-link target="_blank" :to="{path:‘/home‘,query:{id:‘1‘}}">新页面打开home页</router-link>

2、编程式导航
可以使用this.$router.resolve解析出需要跳转的url,然后用window.open打开,如下:

let routeUrl = this.$router.resolve({
     path: "/share",
     query: {id:96}
   });
   window.open(routeUrl.href, ‘_blank‘);

这种方法在抓信的安卓版本可用,但是发现在抓信iOS版本APP中无法打开新页面。经过实践发现,按照如下方法即可在抓信的iOS版本APP正常工作。
3, 用<a :href=variable target="_blank">
首先在页面设置好超链接的跳转代码:

<a  :href=url1 target="_blank">打开新窗口</a>

其中变量url1是页面定义的变量:

 export default {
        data() {
            return {
                      url1:"https://www.baidu.com"
            }
        },
        methods: {
                getURL() {
                        const url3= this.$router.resolve({
                              name:"guide",
                             params:{}
                        });
                      this.url1=url3.href;
                }
        },
        mounted() {
                   this.getURL();
        }
                .......

这样,就可以打开新页面了

原文地址:https://blog.51cto.com/kankan/2453529

时间: 2024-12-12 17:45:52

vue.js开发抓信插件,如何在单页应用中打开新窗口的相关文章

flex与js通信、在浏览器中打开新窗口

一.flex与js通信(通过flex调用js方法) var urlR:URLRequest = new URLRequest("javascript:test('from flex')"); navigateToURL(urlR, "_self"); 其中URLRequest中的js方法必须用引号test是js方法名,'from flex'是该js方法的参数. 另一种相互通信方法: ExternalInterface.addCallback("getKyq

Js打开新窗口拦截问题整理

一.js打开新窗口,经常被拦截 //js打开新窗口,经常被拦截 //指定本窗口打开,可以使用 window.open('http://www.tianma3798.cn', '_self'); //不指定或指定新窗口打开被拦截 window.open('http://www.tianma3798.cn'); window.open('http://www.tianma3798.cn', '_blank'); 二. 1.如果是用户点击操作,打开新窗口不被拦截 2.如果在ajax回调函数中调用打开新

轻量级MVVM框架Vue.js快速上手(MVVM、SEO单页面应用)

轻量级MVVM框架Vue.js快速上手(MVVM.SEO单页面应用.×××服务器端渲染.Nuxt.js) 网盘地址:https://pan.baidu.com/s/1LkhepNpGAtRjrxp_CVJNIg 密码: d483备用地址(腾讯微云):https://share.weiyun.com/5tTLqQk 密码:pxezuj Vue.js是一套构建用户界面的轻量级MVVM框架,与其他重量级框架不同的是, Vue.js 的核心库只关注视图层,并且非常容易学习,很容易与其它前端技术或已有的项

Web设计中打开新页面或页面跳转的方法 js跳转页面

Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打开本地网页或互联网:Respose.Write("<script language=&apos;javascript&apos;>window.open(&apos;"+ url+"&apos;)

JS打开新窗口防止被浏览器阻止的方法

这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题 我最近也遇到了这样的问题,所以就把弹出新窗口的方法分享给大家.欢迎大家补充哦... 第一种.使用原生javas

js打开新窗口并且不被拦截

window.open是javascript函数,该函数的作用是打开一个新窗口或这改变原来的窗口,如果你直接在js中调用window.open()函数去打开一个新窗口,浏览器会拦截你,那么如何避免呢. 注意,只有直接使用js调用 window.open(url); 打开新窗口时,才会被拦截,如果是改变原理额窗口:window.open(url,'_self'); 则不会被拦截. 那么 js调用 window.open(url); 打开新窗口,如何才能不会浏览器拦截呢? 浏览器会拦截你,是认为你将

js 打开新窗口方式

之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了.当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看到各种各样的,通过 js 打开新窗口的方法了,这里就总结一下 解决下载功能 这里就先说解决下载功能的方法,通过同事的提醒,改用 iframe 进行处理,直接对 iframe 的 src 进行赋值,就会自动进行下载文件了,不过,如果后端在 response header 设置了某个头部,就会报错了:x

【短信插件】 NiuShop单商户如何调用短信验证码接口

找到了一家不错的短信插件,有需要对接的可以查看学习,在这边分享一下,有需要的可以详细看看,了解一下.http://www.ihuyi.com/ 插件说明本插件系互亿无线针对NiuShop单商户开源商城B2C正式版1.19开发短信插件开发,插件内的所有文件均为对原文件的修改,如果你的系统经过二次开发,安装本插件之前,请仔细核对修改. 功能介绍1.用户注册验证2.用户注册成功3.找回密码4.绑定手机5.修改密码6.订单发货7.订单确认8.订单付款成功9.订单创建成功10.订单提醒11.订单退款提醒1

js页面跳转 和 js打开新窗口 方法

第一种:    <script language="javascript" type="text/javascript">           window.location.href="http://www.dollare.com.cn/login.php?backurl="+window.location.href;     </script> 第二种:    <script language="jav