SvelteKit路由切换前用confirm()确认，如何阻止未确认的跳转

直接监听$navigating store无法阻止路由切换，因为这个store是在路由开始跳转后才触发的。要在路由切换前拦截并通过用户确认决定是否继续，需要使用SvelteKit提供的beforeNavigate钩子。

基础实现 #

导入beforeNavigate并在其中处理确认逻辑，通过event.preventDefault()阻止路由跳转：

import { beforeNavigate } from '$app/navigation';

beforeNavigate((event) => {
  const confirmLeave = confirm('确定要离开当前页面吗？');
  if (!confirmLeave) {
    event.preventDefault();
  }
});

进阶场景（结合页面状态） #

如果需要仅在特定页面或特定状态下（比如表单未保存）才弹出确认，可以结合page store或本地状态判断：

import { beforeNavigate } from '$app/navigation';
import { page } from '$app/stores';

// 假设页面中有未保存的表单时，将此变量设为true
let formHasUnsavedChanges = false;

beforeNavigate((event) => {
  // 仅在当前是表单页面且存在未保存内容时触发确认
  if ($page.url.pathname === '/submit-form' && formHasUnsavedChanges) {
    const confirmLeave = confirm('表单内容未保存，确定要离开吗？');
    if (!confirmLeave) {
      event.preventDefault();
    }
  }
});

说明：beforeNavigate钩子会在所有路由切换动作（包括链接点击、浏览器前进/后退）触发前执行，调用event.preventDefault()可以彻底终止当前路由跳转流程。

内容的提问来源于stack exchange，提问作者Eli-ott