Vue获取url上的参数

Vue获取url上的参数

在 Vue.js 中获取 URL 上的参数，可以使用 vue-router 的 this.$route 对象，或者使用原生 JavaScript 的 URLSearchParams API。以下是两种常见的方法

使用 vue-router

如果您使用 vue-router，可以通过 this.$route.query 来获取 URL 查询参数：

<template>
  <div>
    <p>参数值: {{ paramValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paramValue: null,
    };
  },
  created() {
    // 假设 URL 为 /example?param=value
    this.paramValue = this.$route.query.param; // 获取参数值
  },
};
</script>

使用原生 JavaScript

如果您不使用 vue-router，可以使用 JavaScript 的 URL 和 URLSearchParams API 来获取 URL 参数：

<template>
  <div>
    <p>参数值: {{ paramValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paramValue: null,
    };
  },
  created() {
    const urlParams = new URLSearchParams(window.location.search);
    this.paramValue = urlParams.get('param'); // 获取参数值
  },
};
</script>

示例说明

vue-router 方法：

this.$route.query 用于访问 URL 中的查询参数，适用于使用路由的 Vue 应用。

原生 JavaScript 方法：

URLSearchParams 是一种更通用的方式，不依赖于 vue-router，适用于任何 JavaScript 环境。

注意事项
确保在适当的生命周期钩子中（例如 created）调用获取参数的方法，以确保在组件实例加载后能够正确获取 URL 参数。

访问的参数名需要在 URL 中使用的名称完全匹配。