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 参数。

相关推荐
切糕师学AI1 分钟前
JavaScript 深拷贝方案全解析:从兼容性到健壮性的优先级指南
开发语言·javascript
锅挤2 分钟前
Vue2:收锣罢鼓(8)
前端·javascript·vue.js
xkxnq3 分钟前
第一阶段:Vue 基础入门(第 1 天)
前端·javascript·vue.js
未来之窗软件服务5 分钟前
幽冥大陆(九十 )github 自动化打包JS对接IDE —东方仙盟练气期
javascript·自动化·github·仙盟创梦ide·东方仙盟
恋猫de小郭16 分钟前
Android Studio 的 AI Agent 有什么特别?未来会有惊艳什么功能?
android·前端·flutter
wgc2k2 小时前
Nest.js基础-2、Node.js的版本管理和包管理
开发语言·javascript·node.js
QT 小鲜肉3 小时前
【Linux命令大全】003.文档编辑之col命令(实操篇)
linux·运维·服务器·前端·chrome
深圳佛手8 小时前
不用智能体开发框架,如何调用工具?
前端·python
小夏卷编程9 小时前
ant-design-vue 1.x版本自定义可拖拽弹框
前端·javascript·vue.js
GIS之路9 小时前
GDAL 实现自定义数据坐标系
前端