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

相关推荐
一个专注写代码的程序媛22 分钟前
vue组件间通信
前端·javascript·vue.js
一笑code32 分钟前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员1 小时前
layui时间范围
前端·javascript·layui
NoneCoder1 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19701 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
心宽体胖连壮实1 小时前
记录一次 MarchingSquaresJS 使用经历
vue.js
烛阴1 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript
GetcharZp1 小时前
xterm.js 终端神器到底有多强?用了才知道!
前端·后端·go
JiangJiang1 小时前
🚀 React 弹窗还能这样写?手撸一个高质量 Modal 玩起来!
前端·javascript·react.js
吃炸鸡的前端1 小时前
el-transfer穿梭框数据量过大的解决方案
前端·javascript