vue3获取url参数

// 在 Vue 3 中获取 URL 参数可以使用原生的 URLSearchParams 对象或者第三方库如 vue-router。

// 方法一：使用原生的 URLSearchParams 对象

<template>
  <div>
    <!-- 显示获取到的 URL 参数 -->
    <p>ID: {{ id }}</p>
    <p>Name: {{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      name: null
    };
  },
  created() {
    // 获取当前页面的 URL
    const queryString = window.location.search;
    // 创建一个 URLSearchParams 对象
    const urlParams = new URLSearchParams(queryString);
    // 获取指定的参数值
    this.id = urlParams.get('id');
    this.name = urlParams.get('name');
  }
};
</script>

// 方法二：使用 vue-router（如果项目中使用了 vue-router）

<template>
  <div>
    <!-- 显示获取到的 URL 参数 -->
    <p>ID: {{ $route.query.id }}</p>
    <p>Name: {{ $route.query.name }}</p>
  </div>
</template>

<script>
export default {
  // 不需要额外的代码，直接在模板中使用 $route.query 即可获取 URL 参数
};
</script>

解释说明：

1. 方法一 使用原生的 URLSearchParams 对象来解析 URL 查询字符串。通过 window.location.search 获取查询字符串部分，并使用 URLSearchParams 解析出各个参数。
2. 方法二 如果项目中使用了 vue-router，可以直接通过 $route.query 访问 URL 参数，更加简洁方便。