SvelteKit中如何定义带多搜索参数的页面并正确读取？

你的404错误是因为路由文件夹结构设置错误：

• 你创建的routes/profiles/[search]是动态路由参数（对应URL里/profiles/xxx这类路径段），但目标URL/profiles/search?name=bob&age=44&job=driver里的search是固定路径，?后面的是搜索参数，不需要用动态路由。

正确的路由结构 #

直接创建固定路径的路由文件夹：

routes/profiles/search/

在该文件夹下放置你现有的page.js文件即可。

读取搜索参数的正确方式 #

你写的load函数里用url.searchParams的思路是对的，补充几个常用操作：

• 获取单个参数：url.searchParams.get('name')（返回'bob'）
• 获取多值参数（比如?hobby=reading&hobby=running）：url.searchParams.getAll('hobby')（返回数组['reading', 'running']）
• 遍历并转成对象：

  export function load({ url }) {
    // 遍历所有参数存入对象
    const params = {};
    for (const [key, value] of url.searchParams) {
      params[key] = value;
    }
    console.log('所有搜索参数:', params);
  
    // 快速转成对象的写法
    const paramsObj = Object.fromEntries(url.searchParams);
    console.log('参数对象:', paramsObj);
  }
  

按上述配置后，访问http://example.com/profiles/search?name=bob&age=44&job=driver就不会出现404，同时能正常读取所有搜索参数。

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