vue 获取url地址的参数

// 在 Vue 项目中获取 URL 参数的示例代码

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

// 使用方法：
// console.log(getQueryParams()); // 输出: { id: "123", name: "vue" }

// 方法二：使用 Vue Router（如果项目中使用了 Vue Router）
this.$route.query; // 直接访问 this.$route.query 可以获取到所有查询参数

// 使用方法：
// 假设当前 URL 是 http://example.com/path?id=123&name=vue
// console.log(this.$route.query); // 输出: { id: "123", name: "vue" }

解释说明：

1. 方法一：通过 window.location.search 获取 URL 中的查询字符串部分，然后使用 URLSearchParams 对象解析查询参数。适用于不使用路由库的简单场景。

2. 方法二：如果你的项目中使用了 Vue Router，可以直接通过 this.$route.query 获取查询参数。这是更推荐的方式，特别是在单页应用（SPA）中。

如果你在 Vue 项目中使用了路由，建议使用方法二，因为它更加简洁且与 Vue 生态集成更好。