Vue在原窗口与新窗口打开外部链接的实现代码

目录
  • Vue如何在原窗口与新窗口打开外部链接
    • 总结
  • 补充：vue跳转外部链接
    • vue跳转外部链接

Vue如何在原窗口与新窗口打开外部链接

Vue项目中如果是页面中的内部跳转，可以用this.$router.repalce()实现，如果我们用同样的方法跳转外部链接，我们的外部链接前面追加了​ ​http://localhost:8080/#/​​导致跳转出现问题，那么我们如何跳转到外部链接呢？跳转链接分为原窗口新窗口打开外部链接，具体讲解如下：

HTML部分：

<div class="fotterRightTextOne" @click="jump">Vue跳转外链接</div>

以下是Js部分

1、首先讲解原窗口打开外部链接，如果我们想要达到跳转后可以返回原页面可以使用此方法，接下来分别使用两种方法实现：

(1) 使用location.href =""实现原窗口跳转

jump() {
   location.href="https://www.baidu.com/" rel="external nofollow" 

}

（2）使用window.open(url ,‘_self’), _self属性表示在当前窗口显示目标网页

jump() {
    window.open('https://www.baidu.com/', '_self')

}

2、如果想要实现在新窗口打开外部链接，我们可以使用 window.open(url ,‘_blank’)，_blank属性则表示在新窗口显示目标网页

jump() {
   window.open('https://www.baidu.com/', '_blank')

}

总结

window.open本质上可以看做<a>标签的js版本，或者说是编码式地打开窗口，但它比<a>标签更加灵活，可以通过js实现与打开的页面之间的通信。

补充：vue跳转外部链接

vue跳转外部链接

vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面。

var url = 'www.baidu.com'

//跳转1
window.location.href = url

//跳转2
window.history.pushState(url);
window.history.replaceState(url);

//跳转3
window.open(url,"_blank");

//跳转4
var a = document.createElement("a");
a.setAttribute("href", "www.baidu.com");
a.setAttribute("target", "_blank");
a.click();

到此这篇关于Vue如何在原窗口与新窗口打开外部链接的文章就介绍到这了,更多相关Vue打开外部链接内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • vue如何实现路由跳转到外部链接界面

    目录 vue路由跳转到外部链接界面 vue路由跳转说明 vue路由跳转到外部链接界面 项目中用前端的是vue框架,有一个需求是,当点击一个按钮后,跳转到原来已经发布过的ionic界面上. 如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,因为外部页面中是有HTTP等前缀的,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = ‘url’来实现 具体代码如下: //在data中定义好需要

  • JQuery实现的在新窗口打开链接的方法小结

    第一种:下面的代码是针对jb51这个样式下的a都是在新窗口打开 复制代码 代码如下: <script type="text/javascript"> jQuery(document).ready(function($) { $('.jb51 a').attr({target: "_blank"}); }); </script> 第二种: 复制代码 代码如下: <script src="http://code.jquery.co

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

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

  • Vue中在新窗口打开页面及Vue-router的使用

    背景 在开发提分加项目的过程中,遇到了点击下拉菜单时在新窗口中打开页面,由于之前一直做的是单页面应用,没有碰到过类似的需求,于是上网搜了一下解决办法,也再次系统地温习了一下vue-router. 解决 使用路由对象的resolve方法解析路由,可以得到location.router.href等目标路由的信息.得到href就可以使用window.open开新窗口了. const {href} = this.$router.resolve({ name: "statistics-explain&qu

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

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

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

  • 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等目标路由的信息,只

  • vue跳转页面打开新窗口,并携带与接收参数方式

    目录 1.携带普通类型参数 2.携带复杂类型参数 vue页面跳转并传参的八种方式 方法一 方法二 方法三 方法四 方法五 方法六 方法七 方法八 1.携带普通类型参数 字符串.数字等. path:要跳转新页面的路由链接 query:要携带的参数 let pathInfo = this.$router.resolve({   path:'/product_detail',      query:{          productId:'11'      }  })  window.open(pa

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

    本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题 我最近也遇到了这样的问题,所以就把弹出新窗口的方法分享给大家.欢迎大家补充哦... 第一种.使用原生javascript的window.open()方法(大部分情况下会被浏览自阻止) 第二种.模拟表单(form)提交,原理是指定表单的a

  • JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

    本文实例讲述了JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法.分享给大家供大家参考,具体如下: 在一些不正规的网站,尤其是那些挂满广告的下载站,经常在你点击的下载链接之前,无论你点击网页的任何一处都会弹出新窗口. 这样的效果,可以轻松用JavaScript做到,还可以专门指定点击某一区域的Div,才触发打开新窗口的事件. 比如下图的效果: 在原网页中,指定一个Div,无论用户点击这个Div的任意区域,都会打开新窗口,而点击其它地方则不会. 在新窗口的地址栏不可以编辑,不能被调

  • 三种方法让Response.Redirect在新窗口打开

    Response.Rederect在默认情况下是在本页跳转,所以除了在js中用window.open或是给A标签添加target属性之外,在后台似乎不能来打开新的页面,其实不然,通过设置form的target属性同样可以让Response.Rederect所指向的url在新的窗口打开.下面用三种方法来实现. 1 .给form指定target属性,那么本页面中所有的Response.Rederect都将在新的窗口中打开.代码如下: 复制代码 代码如下: protected void Page_Lo

随机推荐