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

news2025/7/8 9:25:40

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

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/6868.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【React二】ref与事件处理与生命周期钩子函数

关于react基础及组件化编程的可以参考本篇笔记 文章目录一、 React中的事件处理1-1 例子: 不要过度使用ref1-2 受控组件与非受控组件1-2-1 受控组件1-2-2 非受控组件1-3 高阶函数1-3-1 函数的柯里化1-3-2 不用柯里化的写法二、生命周期2-1 引出生命周期2-2 组件生命…

TiDB 数据库架构概述

TiDB 数据库架构概述 TiDB体系架构 水平扩容或者缩容金融级高可用实时HTAP云原生的分布式数据兼容MYSQL5.7 Region:存储单位,96~144MB之间,分布式存储在TiKV中 TiKV:默认三副本,将分布式数据存储,并进行存储副本。…

【ARM微型电脑/IoT设备/嵌入式】树莓派安装失败sysstat,成功后还是无法使用sar,并报错:-bash:sar:command not found

1. 安装sysstat报错 安装: sudo apt-get install sysstat错误如下: dpkg: error processing package sysstat (–configure): installed sysstat package post-installation script subprocess returned error exit status 10 Errors were encountered…

1737C - Ela and Crickets

原题链接: Problem - 1737C - Codeforces 题目描述: The problem, which involves a non-standard chess pieces type that is described below, reads: given 33 white crickets on a n⋅nn⋅n board, arranged in an "L" shape next to ea…

详细讲解磁盘及文件系统管理(图例解析)

磁盘及文件系统管理详解 目前市场上主流的磁盘是机械式硬盘 u盘,光盘,软盘,硬盘,磁带 机械式硬盘 【硬盘内部由一个个同心圆组成】如下图: 硬盘内部所有盘片都固定在一根“轴”上,所以:所有…

Vant的List组件列表 滑动后不触底也发送请求的Bug

📃目录跳转📚简介:🎉页面效果:💭使用Float:🧐 问题:🔭div 转为行内块 (解决)🏆总结:📚简介: Vant的…

docke入门基础知识

一、Docker 架构 Docker 包括三个基本概念: 镜像(Image):Docker 镜像(Image),就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件系统。 容…

html前端跨域问题的解决方案

前言: 在前端发出Ajax请求的时候,有时候会产生跨域问题,报错如下: Access to XMLHttpRequest at ‘http://127.0.0.1/api/post’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is pre…

WINSOFT ComPort轻松连接到各种串行端口和连接设备

WINSOFT ComPort轻松连接到各种串行端口和连接设备 WINSOFT ComPort是一个Delphi库和CBuilder,通过USB端口连接到输入设备。该库提供CP210x、CP2130、CDC、FTDI、PL2303和CH34x设备。这些标准包括广泛的设备和电气从设备。例如,除了标准输入设备之外&…

Android App开发之利用Glide实现图片的三级缓存Cache讲解及实战(附源码 超详细必看 简单易懂)

需要图片集和源码请点赞关注收藏后评论区留言~~~ 一、利用Glide实现图片的三级缓存 图片加载框架之所以高效,是因为它不但封装了访问网络的步骤,而且引入了三级缓存的机制。具体来说,是先到内存中查找图片,找到了就直接显示内存图…

国内访问Github超级慢?那是你没有用我这个脚本。直接起飞。

导语 之前很多朋友咨询过国内访问Github较慢的问题,然后我一般让他们自己去知乎上找攻略,但今天我才发现网上竟然没有一个一键配置的脚本,一般都需要我们跟着教程一步步地去做才行。这也太麻烦了,于是自己动手写了个脚本&#xf…

2-1 C++类的转换函数与禁止隐士转换(explicit)

1. 转换函数与explicit关键字 1.1 转换函数 下述代码的第5行operator double()即是一个转换函数,通过这个函数,编译器可以在需要的情况下,直接将Fraction类型的对象转换为double类型。这个函数有两个特点:首先因为转换函数的返回…

FFplay文档解读-50-多媒体过滤器四

32.21 showspectrumpic 将输入音频转换为单个视频帧,表示音频频谱。 过滤器接受以下选项: size,s指定输出的视频大小。 有关此选项的语法,请查阅(ffmpeg-utils)视频大小语法。 默认值为4096x2048。 mod…

Spring Boot入门必会(基本介绍+依赖管理+自动装配)

目录 一.基础入门 1.Spring Boot 是什么? 2.SpringBoot 快速入门 2.1完成步骤 2.2快速入门小结 3.Spring SpringMVC SpringBoot 的关系 3.1梳理关系 3.2如何理解 -约定优于配置 二.依赖管理和自动配置 1.依赖管理 1.1 什么是依赖管理 1.2 修改自动仲裁/默认版本号 …

论文阅读-Federated Social Recommendation with Graph NeuralNetwork

基于图神经网络的联邦社交推荐 1. 引言 因此,针对社交推荐任务,我们设计了一个联邦学习推荐系统,该系统具有异构性、个性化和隐私保护要求,具有一定的挑战性。为此,设计了一个基于图神经网络(FeSoG)的联邦社交推荐框…

【RHCE】ansible的简单配置

目录 使用静态清单文件指定受管主机 定义主机清单 定义方式 使用静态主机清单指定受管主机(默认) 验证清单 第一种方式 第二种方式(图表形式显示) 选择主机和组: 1>匹配所有主机 2>匹配指定的主机或者主…

二叉树与树、森林之间的转换

关于树的概念 树可以称为特殊的森林 , 其中二叉树是树中一些节点度数最大为2 ,并且分左右孩子的树 ● 二叉树很重要 • 结构简单 • 存储效率高 • 运算算法相对简单 • 任何森林、树都可以转换成二叉树 ● 讨论 • 二叉树 度为2 的树 ? 答: 树的度就是…

官方盘点 .NET 7 新功能

.NET 7 为C# 11/F# 7、.NET MAUI、ASP.NET Core/Blazor、Web API、WinForms、WPF 等应用程序带来了更高的性能和新功能。使用 .NET 7,您还可以轻松地将 .NET 7 项目容器化,在 GitHub 操作中设置 CI/CD 工作流,并实现云原生可观察性。欢迎下载…

java之Fork/Join框架

文章目录前言工作窃取算法Fork/Join框架的设计Fork/Join框架的异常处理Fork/Join框架的实现原理总结前言 Fork/Join框架是java7提供的一个用于执行并行任务的框架,是一个把大部分任务分割成若干个小任务,最终汇总每个小任务结果后,得到大任务…

4进程地址空间

文章目录前言1. 概念引入2. CPU和物理内存关系3.何为进程地址空间4. 为什么存在地址空间?前言 本节主要是讲解进程地址空间,区分和物理内存地址空间的差别,并且向读者解释四个疑问: 怎样验证地址空间的排布; 进程地址空间是什么; 进程地址空间和物理内存之间的关系; 为什么要…