vue封装一个查询URL参数方法

在Vue.js项目中，处理URL参数是一个常见的需求。为了提高代码复用性和可维护性，可以封装一个查询URL参数的方法。以下是如何在Vue.js中实现这个功能的详细步骤。

一、封装查询URL参数方法

首先，在Vue项目的 src目录下创建一个工具文件，例如 urlUtils.js，用于存放与URL处理相关的方法。

// src/utils/urlUtils.js

/**
 * 获取URL参数的方法
 * @param {String} paramName - 参数名称
 * @param {String} [url=window.location.href] - 可选的URL字符串，默认为当前页面URL
 * @returns {String|null} - 返回参数值，如果不存在则返回null
 */
export function getQueryParam(paramName, url = window.location.href) {
    const paramRegex = new RegExp(`[?&]${paramName}=([^&#]*)`, 'i');
    const result = paramRegex.exec(url);
    return result ? decodeURIComponent(result[1]) : null;
}
​

 

 

二、在Vue组件中使用封装的方法

1. 引入方法

在需要使用该方法的Vue组件中引入 getQueryParam方法。

// src/components/ExampleComponent.vue

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

<script>
import { getQueryParam } from '@/utils/urlUtils';

export default {
  data() {
    return {
      paramValue: null
    };
  },
  created() {
    // 获取URL中的参数值
    this.paramValue = getQueryParam('exampleParam');
  }
};
</script>
​

 

 

三、完整示例

以下是一个完整的Vue组件示例，展示如何使用封装的 getQueryParam方法获取URL参数并在模板中显示。

// src/components/ExampleComponent.vue

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

<script>
import { getQueryParam } from '@/utils/urlUtils';

export default {
  data() {
    return {
      paramValue: null
    };
  },
  created() {
    // 获取URL中的参数值
    this.paramValue = getQueryParam('exampleParam');
  }
};
</script>