vue3 获取url参数

// 在 Vue 3 中获取 URL 参数可以通过使用浏览器内置的 URLSearchParams API 来实现。
// 下面是一个简单的示例，展示如何在 Vue 3 组件中获取 URL 参数。

<template>
  <div>
    <p>ID: {{ id }}</p>
    <p>Name: {{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      name: null
    };
  },
  created() {
    // 使用 URLSearchParams 解析 URL 中的查询参数
    const queryParams = new URLSearchParams(window.location.search);

    // 获取特定的查询参数
    this.id = queryParams.get('id');
    this.name = queryParams.get('name');
  }
};
</script>

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

解释说明：

1. 模板部分 (<template>)：显示从 URL 中获取的 id 和 name 参数。
2. 脚本部分 (<script>)：
   • data() 函数返回一个对象，包含两个属性 id 和 name，用于存储从 URL 中获取的参数值。
   • created() 生命周期钩子在组件创建后立即执行。在这个钩子里，我们使用 URLSearchParams 对象解析当前页面 URL 中的查询字符串，并通过 get() 方法获取指定的查询参数（如 id 和 name）。
3. 样式部分 (<style scoped>)：可以添加自定义样式，这里留空以简化示例。

这个示例展示了如何在 Vue 3 组件中轻松获取并使用 URL 查询参数。