在Svelte中使用tinro路由，如何捕获路由变更（含链接点击场景）？

1. 用Tinro内置on:navigate拦截内部路由跳转 #

Tinro会在内部路由跳转前触发navigate自定义事件，你可以通过监听这个事件拦截跳转，配合表单变更状态实现确认提示：

<script>
  let formHasChanges = false;

  // 标记表单已修改
  function markFormChanged() {
    formHasChanges = true;
  }

  // 拦截内部路由跳转
  function handleRouteNavigate(event) {
    if (formHasChanges) {
      const shouldLeave = window.confirm('表单内容未保存，确定要离开吗？');
      if (!shouldLeave) {
        event.preventDefault(); // 阻止路由切换
      }
    }
  }
</script>

<!-- 监听Tinro的路由跳转事件 -->
<svelte:window on:navigate={handleRouteNavigate} />

<form>
  <input type="text" on:input={markFormChanged}>
  <!-- 其他表单元素 -->
</form>

2. 结合beforeunload覆盖外部场景 #

保留你原本的beforeunload逻辑，处理关闭窗口、手动修改URL等外部页面卸载场景，和内部拦截结合就能覆盖所有情况：

<script>
  let formHasChanges = false;

  function markFormChanged() {
    formHasChanges = true;
  }

  // 处理外部页面卸载场景
  function handleBeforeUnload(event) {
    if (formHasChanges) {
      event.preventDefault();
      event.returnValue = ''; // 部分浏览器需要此值才能触发原生提示
    }
  }

  // 处理Tinro内部路由跳转
  function handleRouteNavigate(event) {
    if (formHasChanges) {
      const shouldLeave = window.confirm('表单内容未保存，确定要离开吗？');
      if (!shouldLeave) {
        event.preventDefault();
      }
    }
  }
</script>

<svelte:window on:beforeunload={handleBeforeUnload} on:navigate={handleRouteNavigate} />

<form>
  <input type="text" on:input={markFormChanged}>
</form>

3. 封装成通用组件（可选） #

如果多个页面需要这个功能，可以把逻辑封装成可复用组件，减少重复代码：

<!-- ConfirmUnsavedChanges.svelte -->
<script>
  export let hasUnsavedChanges = false;

  function handleBeforeUnload(event) {
    if (hasUnsavedChanges) {
      event.preventDefault();
      event.returnValue = '';
    }
  }

  function handleNavigate(event) {
    if (hasUnsavedChanges) {
      const shouldLeave = window.confirm('表单内容未保存，确定要离开吗？');
      if (!shouldLeave) {
        event.preventDefault();
      }
    }
  }
</script>

<svelte:window on:beforeunload={handleBeforeUnload} on:navigate={handleNavigate} />

在表单组件中引入使用：

<script>
  import ConfirmUnsavedChanges from './ConfirmUnsavedChanges.svelte';
  let formChanged = false;
</script>

<ConfirmUnsavedChanges {hasUnsavedChanges}={formChanged} />

<form>
  <input type="text" on:input={() => formChanged = true}>
</form>

内容的提问来源于stack exchange，提问作者Çağın Sucu