vue获取浏览器url参数

// 在 Vue 项目中获取浏览器 URL 参数的方法

// 方法一：使用原生 JavaScript 的 URLSearchParams
export function getQueryParams() {
  const queryString = window.location.search; // 获取 URL 中的查询字符串部分
  const urlParams = new URLSearchParams(queryString); // 创建 URLSearchParams 对象
  const params = {};
  for (const [key, value] of urlParams.entries()) { // 遍历参数并存入对象
    params[key] = value;
  }
  return params;
}

// 使用方法：
// 在组件中调用此函数即可获取 URL 参数
// this.$nextTick(() => {
//   console.log(getQueryParams());
// });

// 方法二：使用 Vue Router（如果项目中使用了 Vue Router）
// 假设你已经在项目中配置了 Vue Router，并且当前路由有查询参数
export function getRouterQueryParams() {
  return this.$route.query; // 直接访问 $route.query 获取查询参数
}

// 使用方法：
// 在组件中直接使用 this.$route.query 即可获取 URL 参数
// console.log(this.$route.query);

解释说明：

1. 方法一：使用原生 JavaScript 的 URLSearchParams 来解析 URL 中的查询字符串。通过 window.location.search 获取查询字符串部分，然后使用 URLSearchParams 对象来遍历和提取参数。

2. 方法二：如果你在项目中使用了 Vue Router，可以直接通过 this.$route.query 来获取 URL 中的查询参数。这种方式更简洁，适用于已经配置好 Vue Router 的项目。