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 中使用的名称完全匹配。

原文地址：https://blog.csdn.net/weixin_43159039/article/details/142844455

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！