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

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

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

javascript 复制代码
export const getQueryParam = (param) => {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
};

你可以将上述代码保存为一个单独的文件,例如 utils.js。然后在你的 Vue 组件中导入并使用该方法来获取 URL 参数。

javascript 复制代码
import { getQueryParam } from './utils';

export default {
  mounted() {
    const queryParam = getQueryParam('paramName');
    console.log(queryParam);
  },
};

在上述示例中,getQueryParam 方法接受一个参数 param,它表示要查询的参数名称。然后,它使用 URLSearchParams 对象来解析当前 URL 的查询参数,并返回指定参数的值。

请注意,上述代码中的 paramName 是要查询的参数名称,你需要将其替换为实际的参数名称。此外,你可以在其他组件中重复使用该方法来获取不同的 URL 参数。

相关推荐
533_38 分钟前
[svg] fill-opacity、stroke-opacity与opacity
前端
九天轩辕39 分钟前
Chromium 内核深度剖析:HTML 属性解析限制导致的视频静音失效问题
前端·html·音视频
cmdyu_39 分钟前
Chrome 132+ 篡改猴脚本不生效的排查与解决
前端·chrome
曹牧40 分钟前
Java:解析Json字符串格式要求
java·linux·运维·前端
ai产品老杨40 分钟前
源码级赋能:基于Spring Boot/Vue的企业级AI视频平台二次开发实战与架构解析(GB28181/边缘计算/算法商城)
vue.js·人工智能·spring boot
wuhen_n1 小时前
终局之战:全链路性能体检与监控
前端·javascript·vue.js
Greg_Zhong1 小时前
认识前端自动化测试、小程序中如何实现单元测试
前端·小程序·单元测试
Dovis(誓平步青云)1 小时前
《 One-KVM 的硬件级远控方案,通过 玩客云 等廉价硬件实现 视频信号采集 + 键鼠模拟 + 虚拟 USB》
运维·前端·网络·ai编程
csdn_aspnet1 小时前
ASP.NET Core:使用 JavaScript 加密并在控制器中解密
javascript·asp.net·.netcore
Front思1 小时前
electron桌面开发
前端·javascript·electron