vue封装一个查询URL参数方法

最新推荐文章于 2025-03-29 14:10:00 发布

Eli-sun

最新推荐文章于 2025-03-29 14:10:00 发布

阅读量452

点赞数 1

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/vfjcgg/article/details/139420197

版权

vue封装一个查询URL参数方法

在 Vue 中，你可以封装一个查询 URL 参数的方法来获取 URL 中的查询参数。以下是一个示例代码：

export const getQueryParam = (param) => {
   
  const urlParams = new URLSearchParams(window.location.search);

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Eli-sun

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue3从入门到实战：路由的query和params参数

LHY537200的博客

04-03

1万+

在Vue 3中，我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息，以便页面可以根据这些信息来显示不同的内容或执行不同的操作。查询参数的使用方式类似于在URL中添加附加信息，以便页面之间可以根据这些信息进行交互和通信。这在很多应用中都非常有用，例如搜索功能、过滤功能、分页功能等等。举个例子，假设我们有一个商品列表页面，用户可以在搜索框中输入关键字来搜索商品。当用户点击搜索按钮时，我们可以将输入的关键字作为查询参数添加到URL中，然后跳转到商品列表页面。在商品列表页面

vue封装url验证方法

vfjcgg的博客

06-03

431

在上述示例中，validateUrl 方法接受一个 URL 参数，并使用正则表达式来验证 URL 的格式是否有效。你可以在组件中调用该方法来验证用户输入的 URL。请注意，上述代码中的正则表达式是一个简单的示例，可能不能完全涵盖所有的 URL 格式。你可以根据需要调整正则表达式的规则。你可以将上述代码保存为一个单独的文件，例如 utils.js。然后在你的 Vue 组件中导入并使用该方法来验证 URL。在 Vue 中，你可以封装一个 URL 验证的方法来验证给定的 URL 是否有效。

参与评论您还未登录，请先登录后发表或查看评论

vue3 cdn 的方式，通过 URLSearchParams 来获取参数的信息。

花花鱼的专栏

07-05

426

spring boot 通过接口给本地html（vue cdn方式）传值，并解析相关的传值参数，显示相关的信息。

Vue3的声明式路由传参

热门推荐

花生日记

05-27

2万+

url是一个 URL地址，我们在使用 vue的时候，经常需要获取 url的参数，获取方法有很多种，这里我只介绍一种获取 url参数的方法，那就是使用 Requests. urlset. newContext （）方法。下面是我的代码实现：上面的代码中，我们传入的参数是一个字符串，其实可以直接将其转化为机器码并进行刷新，不过我认为这样做太过麻烦，因此我们选择了将其转化为机器码后再进行刷新。下面是一个简单的例子：通过这个例子，我们可以看出， vue会将字符串中的汉字转化为机器码，然后再进行刷新。

Vue中使用JS类的封装及应用

01-07

在vue中使用类的封装可以创造出多个具有相同属性或方法的实例。实例们具有统一的属性和方法，能够保证数据的一致性。代码更加简洁，只需要将参数...向A类添加一个方法，可根据id异步获取实例的其他信息getInfo()。 e

vue中二次封装axios请求，支持url参数拼接、blob数据流和formdata上传等

donggua_123的博客

11-24

9536

现在vue项目基本上都是使用axios进行请求操作，但是axios有时候并不能完全满足业务的需求，因为官方axios只支持一些比较规则的请求参数和方式，比如body类型的post，params类型的get。而实际业务中后台给的接口可不会那么如你所愿的规范，当后台同事肆意挥洒，尽情装逼，完全是即兴发挥，不考虑前端感受的时候，往往给出来的api接口是很变态的： get方法的url后面拼接参数...

vue之封装多个组件调用同一接口的案例

11-19

它使用了一个名为`$http`的函数，该函数可能是基于axios库封装的异步请求方法： ```javascript export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => {...

直接获取URL的办法----------new URLSearchParams()

留着鼻涕敲代码

12-13

3669

URLSearchParams 构造函数有很多实用的方法来处理 URL 的查询字符串平常我们通过查询字符串的方式传参需要通过对字符串进行处理后才能使用。 URLSearchParams()中有帮我们做处理的方法直接返回处理后的数据格式 URLSearchParams构造函数通过new实例化，并传入查询的字符串 let params = new URLSearchParams('需要查询的URl');//一般配合location.search使用必须传入以下格式的字符串 URLSearchPa.

new URLSearchParams() 获取地址栏的参数通过键的方式拿到值

m0_45219210的博客

03-09

477

比如当前路径为 http:localhost:8080/#/detailqiyu? domain=dbybxjjyxgs&fromModule=qiyu_callcenter&mobilePhone=13759088676& timestamp=4646761416&signature=d5d09152fef267f649c78904cdebe4454e88a11c7 想从里面取出mobilePhone后面的手机号字段并使用，可以进...

使用 URLSearchParams 解析和管理URL query参数

发果叁

02-18

2879

首先是一个构造函数，会生成一个URLSearchParams对象，参数类型：不传｜ string ｜ object ｜ URLSearchParams，并且遇到特殊字符它会自动帮我们encode 和 decode//has 返回 [`Boolean`] 判断是否存在此搜索参数//get 获取指定搜索参数的第一个值，如果是编码过的会自动转码，比如 b对应的值是 %40，会自动转为 @//getAll 获取指定搜索参数的所有值，返回是一个数组。

new URLSearchParams( )用法说明

天高任鸟飞

09-28

1160

设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。返回一个iterator可以遍历所有键/值对的对象。返回iterator 此对象包含了键/值对的所有键名。返回iterator 此对象包含了键/值对的所有值。从搜索参数列表里删除指定的搜索参数及其对应的值。返回搜索参数组成的字符串，可直接使用在URL上。返回 Boolean 判断是否存在此搜索参数。获取指定搜索参数的所有值，返回是一个数组。插入一个指定的键/值对作为新的搜索参数。获取指定搜索参数的第一个值。

vue 使用post请求时报URLSearchParams的错误

qq_40652539的博客

01-03

1734

参考网址：https://blog.csdn.net/guoscy/article/details/78953532

vue+webpack+axios,如何处理URLSearchParams的兼容性？

weixin_33787529的博客

08-10

518

原因默认情况下，axios将JavaScript对象序列化为JSON。解决办法以iview cil项目结构为例 npm install url-search-params-polyfill --save 复制代码在main.js中引入： import 'url-search-params-polyfill'; 复制代码...

vue获取url地址中参数

资深Bug开发大师

12-31

2604

vue获取url地址中的参数首先获取到url地址 let geturl = window.location.href // http://localhost:8081/#/pages/index/index?qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99 方式一 let getqyinfo = geturl.split('?')[1] //qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99

URL和URLSearchParams对象使用详解

jimojianghu的专栏

02-20

9730

URL，称为统一资源定位器，指互联网上能找到资源定位的字符串。在一般语境中，又称网络地址或链接，当我们需要访问某个网页就需要输入对应的网址字符串，而这个网址就是URL。本文将详细介绍前端开发中遇到的两个API，URL和URLSearchParams对象的相关知识点，以及如何使用它们。

【Vue3】请求参数

小秀的博客

12-31

842

【代码】【Vue3】请求参数。

vue封装一个ajax

07-13

在 Vue 中封装一个 Ajax 请求可以通过创建一个自定义的方法来实现。下面是一个示例代码：首先，在你的 Vue 组件中，你可以创建一个名为 `ajax` 的方法： ```javascript methods: { ajax(url, method, data, successCallback, errorCallback) { // 执行 AJAX 请求 axios({ url: url, method: method, data: data }) .then(response => { // 请求成功时调用成功回调函数 successCallback(response.data); }) .catch(error => { // 请求失败时调用错误回调函数 errorCallback(error); }); } } ``` 然后，你可以在需要发送 Ajax 请求的地方调用这个方法。传递需要的参数，并提供成功和失败的回调函数： ```javascript this.ajax('/api/user', 'GET', null, function(response) { // 请求成功时的回调函数 console.log(response); }, function(error) { // 请求失败时的回调函数 console.error(error); } ); ``` 这个示例中使用了 axios 库来发送 Ajax 请求，你可以根据需要选择其他的库。这个方法可以根据实际需求进行扩展，例如添加请求头、处理错误等。