vue 获取地址栏参数

// 在 Vue 中获取地址栏参数的方法可以通过 URLSearchParams 对象来实现。
// 下面是一个简单的示例代码，展示如何在 Vue 组件中获取并解析 URL 参数。

<template>
  <div>
    <!-- 显示获取到的参数 -->
    <p>Query Parameter 'id': {{ id }}</p>
    <p>Query Parameter 'name': {{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      name: null
    };
  },
  created() {
    // 在组件创建时获取 URL 参数
    this.getQueryParameters();
  },
  methods: {
    getQueryParameters() {
      // 使用 URLSearchParams 解析 URL 参数
      const query = new URLSearchParams(window.location.search);
      this.id = query.get('id');   // 获取 'id' 参数
      this.name = query.get('name'); // 获取 'name' 参数
    }
  }
};
</script>

解释说明：

1. URLSearchParams：这是一个内置的 JavaScript 对象，用于解析 URL 查询字符串（即 ? 后面的部分）。它提供了简单易用的 API 来获取、设置和删除查询参数。
2. created 钩子：在 Vue 组件的生命周期中，created 钩子会在实例创建完成后立即调用。我们在这里调用 getQueryParameters 方法来获取 URL 参数。
3. getQueryParameters 方法：该方法使用 URLSearchParams 来解析当前页面的查询字符串，并将参数赋值给组件的数据属性 id 和 name。

这样，你就可以在 Vue 组件中轻松获取并使用 URL 地址栏中的参数了。