用vue 写一个递归 循环url参数进行解码

可以参考以下代码实现：

<template>
  <div>
    <div v-if="!isParamObjEmpty">
      <p>URL参数:</p>
      <ul>
        <li v-for="(value, key) in paramsObj" :key="key">{{ key }}: {{ value }}</li>
      </ul>
    </div>
    <div v-if="isParamObjEmpty">
      <p>没有URL参数。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ParamDecoder",
  data() {
    return {
      paramsObj: {}
    };
  },
  computed: {
    isParamObjEmpty() {
      return Object.keys(this.paramsObj).length === 0;
    }
  },
  created() {
    this.decodeParams(location.search);
  },
  methods: {
    decodeParams(queryString) {
      if (queryString) {
        const params = new URLSearchParams(queryString);
        for (const [key, value] of params.entries()) {
          if (/\[(.+)\]/.test(key)) {
            // 处理数组
            const arrayKey = key.match(/\[(.+)\]/)[1];
            const arrayValue = decodeURIComponent(value);
            if (this.paramsObj[arrayKey]) {
              this.paramsObj[arrayKey].push(arrayValue);
            } else {
              this.paramsObj[arrayKey] = [arrayValue];
            }
          } else {
            // 处理普通值
            this.paramsObj[key] = decodeURIComponent(value);
          }
        }
      }
    }
  }
};
</script>

这个组件会在创建时自动解析当前页面 URL 的查询参数，并将解析后的结果存储在 `paramsObj` 对象中。如果 URL 中没有查询参数，则显示“没有URL参数。”的提示。如果有查询参数，则显示每个参数的键值对。注意，这个组件还支持解析 URL 中的数组参数。