vue3获取地址栏参数

// 在 Vue 3 中获取地址栏参数可以通过 URLSearchParams API 来实现。
// 下面是一个简单的示例代码，展示如何在 Vue 3 组件中获取并使用地址栏参数。

<template>
  <div>
    <p>获取到的参数：</p>
    <ul>
      <li v-for="(value, key) in queryParams" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
  setup() {
    const queryParams = ref({});

    // 获取地址栏参数
    const getQueryParams = () => {
      const urlParams = new URLSearchParams(window.location.search);
      const params = {};
      urlParams.forEach((value, key) => {
        params[key] = value;
      });
      queryParams.value = params;
    };

    // 在组件挂载时获取参数
    onMounted(() => {
      getQueryParams();
    });

    return {
      queryParams,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. URLSearchParams API：用于解析和操作 URL 查询字符串（即地址栏中的 ? 后面的部分）。
2. onMounted：Vue 3 的生命周期钩子，确保在组件挂载后执行获取参数的操作。
3. ref：用于创建响应式的引用对象，存储从地址栏获取的参数。
4. v-for：用于遍历并显示获取到的参数键值对。

通过这种方式，你可以在 Vue 3 组件中轻松获取并使用地址栏参数。