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

相关推荐
半生过往6 分钟前
前端工程师学习智能体开发(一)
前端·学习·状态模式
白雾茫茫丶11 分钟前
Vibecoding 一个主题切换动画库:13 种揭幕方式
前端·vue.js·react.js
计算机魔术师22 分钟前
谷歌宣布 TPU 互联架构支持 100 万芯片规模,电力供应成 AI 基建核心瓶颈
前端
雪芽蓝域zzs26 分钟前
第四十九节:TagsView 右键菜单(带三角箭头)给每个 tag 增加**鼠标右键菜单**(右键标签弹出:关闭、关闭其他、关闭全部)
前端·javascript·vue.js
এ慕ོ冬℘゜39 分钟前
从零开发移动端医院挂号页面:适配、交互与前端实现详解
前端·javascript
宁渡AI大模型1 小时前
AI 全栈面试新趋势:Vibe Coding、前端、Java 后端高频面试题深度解析|河南宁渡科技有限公司编程教程
java·javascript·人工智能·python·ai大模型
东风微鸣1 小时前
AI依赖更新别裸奔🚨
javascript
掘金挖土1 小时前
前端手摸手跑路之 AI 应用开发(六)
前端·后端
liuyt20221 小时前
【javaweb】day4
前端
研☆香1 小时前
echarts图表的使用方法
javascript