SvelteKit中slug页面调用默认Form Action的fetch路径问题

在slug动态路由页面（如/articles/[slug]）中，调用默认action不需要使用?或?/这类查询参数，直接请求当前页面的路由路径即可，以下是两种可行写法：

• 使用相对路径./
  这个相对路径会直接指向当前页面的路由端点，是最简单的写法：

  async function handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const response = await fetch('./', {
      method: 'POST',
      body: formData
    });
    
    // 处理响应
    const result = await response.json();
  }
  

• 使用SvelteKit提供的当前页面路径
  通过$page store获取当前页面的路径，更明确：

  import { page } from '$app/stores';
  
  async function handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const response = await fetch($page.url.pathname, {
      method: 'POST',
      body: formData
    });
    
    // 处理响应
    const result = await response.json();
  }
  

为什么?或?/无效？ #

?/xxx是SvelteKit中调用命名action的语法，而默认action不需要额外的标识，直接请求页面路由本身就会触发+page.server.ts里未命名的action函数，所以之前的写法不符合默认action的调用规则。

提交时要注意保持请求方法为POST，并正确传递表单数据，和原生表单提交的行为一致。

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