Vue Router中如何避免硬编码查询参数名？

问题 #

我目前通过以下方式将参数保存到URL：

const save = async (parameter: LocationQuery) => {
  await router.push({ path: '', query: { ...route.query, ...parameter } });
};

调用方式：

save({ param1: 'abc' });

读取和监听参数的方式：

const route = useRoute();
const x = route.query.param1;
const y = computed(() => route.query.param1);

但项目里多个模块有大量查询参数，这种分散硬编码参数名的写法很不规范。于是我定义了参数名枚举：

export enum QueryParams {
  Param1 = 'param1',
  Param2 = 'param2'
  // ...
}

现在读取参数可以用枚举：

const route = useRoute();
const x = route.query[QueryParams.Param1 as string];
const y = computed(() => route.query[QueryParams.Param1 as string]);

但不知道怎么在save方法里用枚举来构造参数，比如想写这样的save方法：

const save = async (name: QueryParams, value: string | number | undefined) => {
    const parameter = // 这里怎么构造？
    await router.push({ path: '', query: { ...route.query, ...parameter } });
};

直接写{ name: value }会生成name=的参数，而不是对应的枚举值（比如param1=），请问怎么用枚举值构造LocationQuery参数？或者有没有更好的方式避免硬编码参数名？

解决方案 #

1. 用对象计算属性构造参数 #

你可以用对象计算属性语法直接把枚举值作为对象的键，这是最直接的解决方法：

const save = async (name: QueryParams, value: string | number | undefined) => {
  const parameter = { [name]: value };
  await router.push({ path: '', query: { ...route.query, ...parameter } });
};

调用时直接传入枚举项和对应值：

save(QueryParams.Param1, 'abc');

这样会正确生成param1=abc的URL参数，而非错误的name=abc。

2. 扩展：支持批量更新参数 #

如果需要一次性更新多个参数，可以扩展save方法，支持传入枚举键值对的对象：

const save = async (params: Partial<Record<QueryParams, string | number | undefined>>) => {
  const queryParams = Object.fromEntries(
    Object.entries(params).map(([key, value]) => [QueryParams[key as keyof typeof QueryParams], value])
  );
  await router.push({ path: '', query: { ...route.query, ...queryParams } });
};

调用方式：

save({
  [QueryParams.Param1]: 'abc',
  [QueryParams.Param2]: 123
});

3. 封装统一的参数操作工具 #

为了彻底标准化参数操作，避免重复代码，可以封装一个Vue Composable，统一处理查询参数的读写逻辑：

// useQueryParams.ts
import { useRoute, useRouter } from 'vue-router';
import { computed } from 'vue';
import type { LocationQueryValue } from 'vue-router';

export enum QueryParams {
  Param1 = 'param1',
  Param2 = 'param2'
}

export const useQueryParams = () => {
  const route = useRoute();
  const router = useRouter();

  // 读取单个参数
  const getParam = (name: QueryParams): LocationQueryValue | LocationQueryValue[] | undefined => {
    return route.query[name];
  };

  // 生成响应式参数（替代手动写computed）
  const getReactiveParam = (name: QueryParams) => {
    return computed(() => route.query[name]);
  };

  // 更新单个参数（传undefined可移除该参数）
  const updateParam = async (name: QueryParams, value: string | number | undefined) => {
    await router.push({
      query: {
        ...route.query,
        [name]: value ?? undefined
      }
    });
  };

  // 批量更新参数
  const updateParams = async (params: Partial<Record<QueryParams, string | number | undefined>>) => {
    const newQuery = { ...route.query };
    Object.entries(params).forEach(([key, value]) => {
      const paramKey = key as QueryParams;
      if (value === undefined) {
        delete newQuery[paramKey];
      } else {
        newQuery[paramKey] = value;
      }
    });
    await router.push({ query: newQuery });
  };

  return {
    getParam,
    getReactiveParam,
    updateParam,
    updateParams
  };
};

组件中使用示例：

import { useQueryParams, QueryParams } from './useQueryParams';

const { getReactiveParam, updateParam } = useQueryParams();

// 响应式获取参数
const param1 = getReactiveParam(QueryParams.Param1);

// 更新参数
await updateParam(QueryParams.Param1, 'abc');

这种方式把所有查询参数操作统一管理，完全避免硬编码参数名，还能统一处理参数的添加、移除逻辑。

内容的提问来源于stack exchange，提问作者timbre timbre