【Vue】url拼接参数获取解析

这篇具有很好参考价值的文章主要介绍了【Vue】url拼接参数获取解析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:
前端在开发的时候有很多情况下需要提供不带参数的链接或者带参数的链接给自己使用或者给第三方系统,如果提供给第三方系统使用的话一般是第三方需要通过iframe/window.open/a标签打开链接进入对应的页面。
情况一:获取当前浏览器地址栏链接
1.location.href:获取当前浏览器地址栏中的链接
【Vue】url拼接参数获取解析
2.new URL(location.href):解析当前浏览器地址栏中的链接。search中有值才能从searchParams中获取值。
【Vue】url拼接参数获取解析
3.new URL(location.href).searchParams.get(‘articleId’):获取浏览器地址栏中地址后面拼接的参数
【Vue】url拼接参数获取解析
情况二:解析指定url
例如**:**
http://localhost:8080/index?param=123
1.new URL(‘http://localhost:8080/index?param=123’):解析指定链接
【Vue】url拼接参数获取解析
2.new URL(‘http://localhost:8080/index?param=123’).searchParams.get(‘param’):获取指定链接中的参数
【Vue】url拼接参数获取解析

对url的整体分析:
1.不带#的url
http://localhost:8080/index?param=123’
可以直接获取链接中的参数
2.带#的url
http://localhost:8080/#/index?param=123’
不可以获取到链接中的参数。
原因一:此时的#在链接中会被认为是标签中的标识,即锚点也就是重定向,因为进行了重定向所以访问不到
原因二:加了#号的链接是不会被发送到服务器的,浏览器也不会解析链接携带的参数
解决办法:把参数放到前面。http://localhost:8080?param=123#/index

【Vue】url拼接参数获取解析文章来源地址https://www.toymoban.com/news/detail-407639.html

到了这里,关于【Vue】url拼接参数获取解析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Angular中如何获取URL参数?

    Angular中的ActivatedRoute中保存着路由信息,可用来提取URL中的路由参数。 route.snapshot是一个路由信息的静态快照,抓取自组建刚刚创建完毕之后。 paramMap是一个从URL中提取的路由参数值的字典。id对应的值就是要获取的用户的id,路由参数总是一个字符串,JavaScript中的“+”操作

    2024年02月11日
    浏览(39)
  • 获取Layui iframe页面的url参数

    弹出layui iframe页面 iframe页面中获取参数

    2024年02月12日
    浏览(55)
  • Java获取URL地址中传递的参数

    一、 Java获取URL地址中传递的参数 二、获取请求的URL地址 三、获取请求的IP地址 四:判断字符串是否能够转换成指定格式的日期

    2024年02月16日
    浏览(41)
  • 三种获取URL参数值的方法

    在 URL 中,查询参数字符串值通常提供有关请求的信息,例如搜索参数或正在使用的对象的 ID。如果在前端处理任何业务或请求逻辑,了解如何从 URL 中检索查询字符串值非常重要。本文分享三种从 URL 获取参数的方法。 URLSearchParams 除 IE 11 之外的所有主要浏览器版本都支持该

    2024年02月16日
    浏览(38)
  • js获取当前域名、Url、相对路径和参数

    由于获取到的当前域名不包括 http://,所以把获取到的域名赋给 a 标签的 href 时,别忘了加上 http://,否则单击链接时导航会出错。 浏览器地址栏显示的是什么,获取到的 url 就是什么。 首先获取 Url,然后把 Url 通过 // 截成两部分,再从后一部分中截取相对路径。如果截取到

    2024年02月16日
    浏览(52)
  • 前端如何获取网页的url

    1.设置或获取对象指定的文件名或路径: 获取整个 URL 为字符串(常用):window.location.href 2.获取与 URL 关联的端口号码:window.location.port eg:http://localhost:8088/#home?tenancyId=4bfaaa6d-410e-11ec-875a-00505685097e =8088 3.设置或获取 URL 的协议部分:window.location.protocol eg:http://localhost:8088/#home?tenancyId=

    2024年02月16日
    浏览(42)
  • Nginx 获取自定义请求header头和URL参数

    在 ngx_lua 中访问 Nginx 内置变量 ngx.var.http_HEADER 即可获得请求头HEADER的内容。 在 nginx配置中,通过$http_HEADER 即可获得请求头HEADER的内容。 案例: 在nginx的location配置中,在获取header配置时, 须要在header名称前面加上固定前缀“http_“,并将header名称中的“-”中划线变为下划线

    2024年02月04日
    浏览(36)
  • 小程序Url Link跳转怎么获取query参数?

    我是通过这种方式接收参数的,如果想验证可以通过编译器模拟:

    2024年02月17日
    浏览(37)
  • 微信小程序页面跳转时URL获取不到参数

    原因: 在跳转的url参数中添加了包含特殊字符?的情况下 ,会出现参数丢失的情况 1.最近在小程序开发过程中,发现之前可用的某个功能字段展示为了undefined,后来查看参数发现 页面跳转时参数丢失了 导致的 此时获取到的参数都是正常的,在上线一段时间后,其它同学在 图

    2024年02月11日
    浏览(65)
  • keycloak~RequiredActionProvider中获取表单认证前URL的参数

    在keycloak中,我们在进行brower浏览器的表单认证时,一般在跳到本页面时,URL上会有redirect_uri这种参数,用来告诉keycloak,在认证成功后的跳转地址,你在表单认证控制器中,可以通过 context.getHttpRequest().getUri().getQueryParameters().getFirst(\\\"redirect_uri\\\") 进行获取,而当你为brower认证流

    2024年04月26日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包