Vue 3中使用Vue Router解析与构建含嵌套对象的URL查询参数

一、解析URL中的嵌套查询参数 #

要把https://www.example.com/?pagination[page]=1&pagination[pageSize]=10这类URL的查询参数解析为嵌套对象，有两种常用实现方式：

原生JavaScript实现 #

无需依赖第三方库，手动遍历URLSearchParams条目构建嵌套对象：

function parseNestedQueryParams(url) {
  const params = new URL(url).searchParams;
  const result = {};

  for (const [key, value] of params) {
    // 拆分类似 pagination[page] 的键
    const keyParts = key.split(/\[|\]/).filter(part => part);
    let current = result;

    for (let i = 0; i < keyParts.length; i++) {
      const part = keyParts[i];
      // 最后一个节点直接赋值，数字类型自动转换
      if (i === keyParts.length - 1) {
        current[part] = isNaN(Number(value)) ? value : Number(value);
      } else {
        // 不存在则创建空对象
        current[part] = current[part] || {};
        current = current[part];
      }
    }
  }

  return result;
}

// 使用示例
const parsed = parseNestedQueryParams('https://www.example.com/?pagination[page]=1&pagination[pageSize]=10');
console.log(parsed.pagination);
// 输出：{ page: 1, pageSize: 10 }

使用qs库简化实现 #

如果项目允许引入第三方库，qs（Vue生态常用的查询参数处理库）可直接完成解析：

import qs from 'qs';

const queryString = 'pagination[page]=1&pagination[pageSize]=10';
const parsed = qs.parse(queryString);
console.log(parsed.pagination);
// 输出：{ page: 1, pageSize: 10 }

二、完善Vue路由生成函数 #

Vue Router会自动将query中的嵌套对象序列化为key[subkey]=value格式，只需在generatePageRoute中构造包含嵌套pagination对象的路由配置即可。

完整实现代码 #

<template>
  <li v-for="page in [...Array(10).keys()]" :key="page">
    <router-link :to="generatePageRoute(page + 1)">
      {{ page + 1 }}
    </router-link>
  </li>
</template>

<script lang="ts">
import Vue from 'vue';
import { RouteLocationRaw } from 'vue-router';

export default class Pagination extends Vue {
  generatePageRoute(page: number): RouteLocationRaw {
    // 复制当前路由查询参数，避免丢失其他参数
    const currentQuery = { ...this.$route.query };
    
    // 合并分页参数：保留原有pageSize，更新当前page
    currentQuery.pagination = {
      ...(currentQuery.pagination as Record<string, any>),
      page: page
    };

    return {
      // 保留当前路由路径
      path: this.$route.path,
      query: currentQuery
    };
  }
}
</script>

代码说明 #

1. 保留现有参数：通过{ ...this.$route.query }复制当前路由的所有查询参数，避免切换页码时丢失筛选条件等其他参数。
2. 更新分页配置：解构原有的pagination对象（如果存在），仅更新page字段，保留pageSize等其他分页设置。
3. 生成路由对象：返回包含当前路径和更新后查询参数的RouteLocationRaw对象，Vue Router会自动将嵌套对象序列化为目标格式的URL参数。

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