vue获取地址栏参数

// 在 Vue 项目中获取地址栏参数的方法

// 方法一：使用原生 JavaScript
export function getQueryParams() {
  // 创建一个对象用于存储参数
  let params = {};
  // 获取地址栏中的查询字符串部分
  let queryStr = window.location.search.substring(1);
  // 如果有查询字符串，则进行分割处理
  if (queryStr) {
    // 按 '&' 分割成键值对数组
    let queryArr = queryStr.split('&');
    for (let i = 0; i < queryArr.length; i++) {
      // 每个键值对再按 '=' 分割成键和值
      let item = queryArr[i].split('=');
      // 将解码后的键值存入对象中
      params[item[0]] = decodeURIComponent(item[1]);
    }
  }
  return params;
}

// 方法二：使用 URLSearchParams API（现代浏览器支持）
export function getQueryParamsUsingURLSearchParams() {
  // 使用 URLSearchParams 对象解析查询字符串
  const params = new URLSearchParams(window.location.search);
  // 创建一个对象用于存储参数
  let queryParams = {};
  // 遍历所有的键值对并存入对象中
  for (let [key, value] of params.entries()) {
    queryParams[key] = value;
  }
  return queryParams;
}

// 在 Vue 组件中使用示例
<template>
  <div>
    <p>获取到的地址栏参数：</p>
    <pre>{{ queryParams }}</pre>
  </div>
</template>

<script>
import { getQueryParams } from './utils/queryParams'; // 引入方法一或方法二

export default {
  data() {
    return {
      queryParams: {}
    };
  },
  created() {
    // 在组件创建时获取地址栏参数
    this.queryParams = getQueryParams();
  }
};
</script>

解释说明：

• 方法一：通过原生 JavaScript 处理地址栏中的查询字符串，手动解析 window.location.search 并将其转换为键值对形式的对象。
• 方法二：使用现代浏览器提供的 URLSearchParams API 来简化查询字符串的解析过程，代码更加简洁且易于维护。
• Vue 组件示例：展示了如何在 Vue 组件中调用上述方法，并将解析后的参数显示在页面上。