VUE跳转外部链接和网页的方法

这篇具有很好参考价值的文章主要介绍了VUE跳转外部链接和网页的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

开发场景:

1、有时我们在轮播图中会遇到点击图片进项跳转到第三方网站

2、或者拿到后端返回的url中要进行跳转

代码操作:

直接使用

1.window.location.href = 链接地址

2.window.open(a,b) a:外部链接 ,b:打开方式(“_blank”新开一个窗口;“_self”覆盖当前窗口)

但是我们发现这样打开有时会出现一个很大的问题:"我们打开的外部链接会自动拼接我们的源地址,导致网址链接不正确,无法正常访问"

VUE跳转外部链接和网页的方法

 3:解决方法

let url = 'www.baidu.com'

let path = window.location.protocol +  "//" + url

window.location.href = path

4.下面代码复制就能自己用!

            // 点击方法 url为传入的第三方链接或网址
            imgClick(url){
                let path=window.location.protocol+'//'+url
                window.location.href=path
            },

最后谢谢大家阅读和观看,希望能帮到您!

 文章来源地址https://www.toymoban.com/news/detail-506910.html

 

到了这里,关于VUE跳转外部链接和网页的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 「网页开发|前端开发|Vue」07 前后端分离:如何在Vue中请求外部数据

    本文主要介绍两种在Vue中访问外部API获取数据的方式,通过让Vue通过项目外部的接口来获取数据,而不是直接由项目本身进行数据库交互,可以实现前端代码和后端代码的分离,让两个部分的代码编写更独立高效。 「网页开发|前端开发|Vue」01 快速入门:快速写一个Vue的

    2024年02月09日
    浏览(45)
  • 微信小程序跳转外部链接

    在开发小程序过程中,我们可能会有这样的需求,在小程序中打开H5或者外部链接 实现方法如下: 小程序管理后台——开发(开发管理)——开发设置:新增业务域名 在这里将你需要的外部链接域名配置完之后,再下载校验文件(校验文件需要放到 当前域名的根目录下 ) 开发者

    2024年02月09日
    浏览(50)
  • uniapp 小程序 跳转到外部链接

    场景 :点击“积分列表”中的“积分兑换”,需要跳转到三方的“积分商城”链接进行兑换,兑换完成后,跳回小程序“积分列表”。 结论 :无法离开小程序,跳转到其他地址。只能通过web-view内嵌的形式,将三方链接内嵌进小程序。 参数传递方式 :拼接到src上 ,web-vie

    2024年02月11日
    浏览(79)
  • 不配置业务域名可以跳转外部链接?(超详细讲解)

    webview详解 相信在使用uniapp开发小程序的过程中,很多朋友都遇到过使用webview跳转外部链接失败的问题? web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 各小程序平台,web-view 加载的 url 需要在后台配置域名白

    2024年02月11日
    浏览(55)
  • Android使用WebView打开外部网页链接

    发布Android应用,除了用原生开发外,更多是采用内嵌H5网页的方式来做,便于更新以及多平台使用。 一、第一种方式是直接通过WebView打开外部H5链接。 新建Android工程 直接创建一个工程,点击运行就可以了,打开是个空页面。 关于如何在AndroidStudio里安装AVD虚拟机,请看另外

    2024年04月24日
    浏览(40)
  • 微信小程序——小程序跳转外部网页

    1.进行小程序与微信公众号的关联操作 2.引导小程序关注公众号,并进入公众号首页。 3.在公众号首页菜单栏里添加外网链接。

    2024年02月08日
    浏览(41)
  • 微信小程序 - 打开跳转 H5 网页链接(小程序内打开网页)

    本文将从 0 到 1,一步步拆分,详细介绍如何实现该功能。 这种需求在小程序中很常见,如下图所示: 首先,需要有一个页面,并且在 app.json → page[] 中正常注册,它用于承载 webview 组件。 在 page 目录新建一个页面(与创建普通页面方法一致),如下图所示: 设置 webview 页

    2023年04月08日
    浏览(52)
  • 如何再钉钉内跳转自己的网页链接

    1.跳转网页转码(工具地址) 原网页:https://www.baidu.com/ 转码后:https%3A%2F%2Fwww.baidu.com%2F 2:地址拼接(官方跳转地址:dingtalk://dingtalkclient/page/link?url= URL pc_slide=true) 替换 URL : 发送到聊天窗口点击即可 3:详细配置走官方文档:https://open.dingtalk.com/document/isvapp/group-plug-ins

    2024年02月11日
    浏览(75)
  • 「Vue|网页开发|前端开发」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转

    本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站,包括页面扩展的逻辑,vue的官方路由vue-router的基本用法以及扩展用法 「Vue|网页开发|前端开发」01 快速入门:快速写一个Vue的HelloWorld项目 我们在进行网站开发的时候,大多数都是需要有多个页面

    2024年02月11日
    浏览(48)
  • H5跳转微信小程序,通过获取URL Scheme,实现短信跳转小程序,微信跳转小程序,邮件跳转小程序,外部链接跳转小程序

    H5链接跳转小程序有2种方式: 第一种:通过微信官方提供的标签wx-open-launch-weapp,打开小程序 第二种:通过获取URL Scheme实现链接跳转小程序 官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21 注意: 开放范围:针对非个人主体小程序开放。 1、缺点 1)

    2024年02月13日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包