如何使用Svelte SPA Router实现全局模态框？

可以实现类似Angular辅助路由的效果，svelte-spa-router虽然没有原生的“命名出口”概念，但通过路由状态监听+全局独立组件的组合，就能打造出可通过URL在任意页面唤起的全局模态框。

核心实现思路 #

让模态组件脱离主路由视图，独立挂载在根组件层级，同时监听路由变化：当URL匹配到特定的模态路径规则时，自动渲染模态内容；关闭模态时同步修改URL，回到之前的页面状态。

具体步骤 #

1. 配置路由规则 #

在路由定义中添加模态专用的路径，不需要为其绑定主视图组件，仅用于传递参数：

// router.js
import { wrap } from 'svelte-spa-router';
import Home from './pages/Home.svelte';
import About from './pages/About.svelte';

export const routes = {
  '/': Home,
  '/about': About,
  // 模态路由：用wrap传递参数，主视图不渲染内容
  '/modal/:type/:id': wrap({
    component: null,
    props: (route) => ({ modalParams: route.params })
  })
};

2. 编写全局模态组件 #

创建一个全局模态组件，监听路由状态并控制显示逻辑：

<!-- GlobalModal.svelte -->
<script>
  import { page } from 'svelte-spa-router';
  import ItemModal from './modals/ItemModal.svelte';
  import UserModal from './modals/UserModal.svelte';

  let isOpen = false;
  let activeModal = null;
  let modalProps = {};

  // 响应路由变化
  $: {
    const modalMatch = $page.path.match(/^\/modal\/(\w+)\/(\d+)/);
    if (modalMatch) {
      const [, modalType, targetId] = modalMatch;
      isOpen = true;
      
      // 根据路由参数加载对应模态内容
      switch (modalType) {
        case 'item':
          activeModal = ItemModal;
          modalProps = { itemId: targetId };
          break;
        case 'user':
          activeModal = UserModal;
          modalProps = { userId: targetId };
          break;
        default:
          isOpen = false;
      }
    } else {
      isOpen = false;
    }
  }

  function closeModal() {
    // 关闭时回退路由，恢复之前的URL
    window.history.back();
  }
</script>

{#if isOpen}
  <div class="modal-backdrop" on:click={closeModal}>
    <div class="modal-container" on:click|stopPropagation>
      {#if activeModal}
        <svelte:component this={activeModal} {...modalProps} on:close={closeModal} />
      {/if}
      <button class="modal-close" on:click={closeModal}>×</button>
    </div>
  </div>
{/if}

<style>
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .modal-container {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    min-width: 320px;
    position: relative;
  }
  .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
  }
</style>

3. 整合到根组件 #

在App.svelte中同时渲染主路由视图和全局模态组件，确保模态始终处于最上层：

<!-- App.svelte -->
<script>
  import { Router } from 'svelte-spa-router';
  import { routes } from './router.js';
  import GlobalModal from './GlobalModal.svelte';
</script>

<main>
  <Router {routes} />
</main>

<!-- 全局模态挂载在根组件，不受主路由视图影响 -->
<GlobalModal />

4. 唤起模态的方式 #

• 直接访问URL：比如输入/modal/item/101，无论当前在首页还是关于页，模态框都会自动弹出
• 组件内路由跳转：

  import { push } from 'svelte-spa-router';
  // 唤起用户详情模态
  push('/modal/user/202');
  

关键细节 #

• 模态组件通过svelte-spa-router的$page存储监听路由，实现全局响应
• 关闭模态时使用history.back()，保证URL状态和页面显示一致，避免无效路由残留
• 可通过路由参数传递任意模态所需数据，扩展性强
• 务必设置足够高的z-index，确保模态覆盖所有主视图内容

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