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

相关推荐
雪芽蓝域zzs几秒前
第三十五节:Axios 统一错误拦截、401 Token 过期处理
前端·javascript·vue.js
XIE3926 分钟前
TipKit:开源富文本编辑器套件,一套逻辑,任意风格!
前端·笔记·开源
范什么特西20 分钟前
一些常用名词
开发语言·前端·javascript
晴天1622 分钟前
前端打包工具全景解析
前端
晴天1623 分钟前
Vite vs Webpack 全方位对比
前端·webpack·node.js
体毛旺盛的猿25 分钟前
HarmonyOS开发面试题
前端·华为·harmonyos
anOnion40 分钟前
构建无障碍组件之Landmarks Pattern
前端·html·交互设计
牧瀬クリスだ41 分钟前
前端三件套基础之JS!!!!
前端·javascript
乌夷44 分钟前
JavaScript 的事件循环
开发语言·javascript·ecmascript
风骏时光牛马44 分钟前
提示词工程:大模型交互的核心塑造技术
前端