Svelte中新建页面与路由跳转：按钮触发页面跳转方法咨询

根据你的需求，分两种场景给出具体实现方式：

1. 纯Svelte项目（无路由框架） #

这种情况和原生HTML逻辑类似，但用Svelte的事件绑定语法：

直接内联跳转逻辑 #

<button on:click={() => window.location.href = '/NEWPAGE'}>NEWPAGE</button>

封装成函数（更易维护） #

<script>
  function openNewPage() {
    window.location.href = '/NEWPAGE';
    // 也可以用 window.location.replace('/NEWPAGE') 替换当前页面历史记录
  }
</script>

<button on:click={openNewPage}>NEWPAGE</button>

2. SvelteKit项目（带官方路由） #

如果用的是SvelteKit（Svelte官方的全栈框架），推荐使用内置的goto方法，它支持客户端导航（无刷新跳转），体验更流畅：

基础跳转 #

<script>
  import { goto } from '$app/navigation';
</script>

<button on:click={() => goto('/NEWPAGE')}>NEWPAGE</button>

模拟表单POST跳转 #

如果需要像HTML表单action那样提交POST请求后跳转，可以用两种方式：

方式一：直接使用表单

<form action="/route" method="POST">
  <!-- 可添加表单字段 -->
  <button type="submit">提交并跳转</button>
</form>

方式二：手动处理请求+跳转

<script>
  import { goto } from '$app/navigation';

  async function submitAndNavigate() {
    // 先发送POST请求
    const response = await fetch('/route', {
      method: 'POST',
      body: JSON.stringify({ /* 你的请求数据 */ }),
      headers: { 'Content-Type': 'application/json' }
    });

    if (response.ok) {
      // 请求成功后跳转
      goto('/NEWPAGE');
    }
  }
</script>

<button on:click={submitAndNavigate}>提交并跳转</button>

注意：Modal是弹窗组件，不属于页面跳转范畴，如果你需要URL变化、页面内容完全替换的跳转，用上面的方法就可以实现。

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