在 SvelteKit 应用中，当用户尝试离开当前页面或跳转到其他路由时，有时我们需要进行一些额外的处理，例如提示用户保存未保存的数据。一种常见的做法是在路由跳转前弹出一个确认框，询问用户是否确定要离开。本文将详细介绍如何使用 SvelteKit 的 beforeNavigate 函数来实现这一功能。
SvelteKit 提供了一个 beforeNavigate 函数，它允许我们在路由发生变化之前执行一些代码。这个函数接收一个包含 from、to 和 cancel 属性的对象作为参数。from 和 to 属性分别表示跳转前的路由和跳转后的路由，而 cancel 属性是一个函数，用于取消路由跳转。
以下是如何在 SvelteKit 中使用 beforeNavigate 函数来添加路由跳转确认提示的示例：
这是一个示例页面。
跳转到其他页面
在这个示例中，我们首先从 $app/navigation 模块导入 beforeNavigate 函数。然后，我们在
beforeNavigate 函数的回调函数接收一个对象，该对象包含 from、to 和 cancel 属性。我们检查 from 属性是否存在，以确保用户正在从一个页面跳转到另一个页面，而不是首次加载页面。然后，我们使用 confirm() 函数显示一个确认框，询问用户是否确定要离开。
如果用户点击“取消”按钮，confirm() 函数将返回 false，我们调用 cancel() 函数来取消路由跳转。如果用户点击“确定”按钮，confirm() 函数将返回 true，路由跳转将继续进行。
注意事项：
- 确保在组件初始化时调用 beforeNavigate 函数，以便注册导航守卫。
- beforeNavigate 函数只能在客户端组件中使用。
- 在 beforeNavigate 回调函数中避免执行耗时的操作，以免阻塞路由跳转。
总结：
通过使用 SvelteKit 的 beforeNavigate 函数，我们可以轻松地在路由跳转前添加确认提示，从而避免用户意外丢失未保存的数据。这对于需要用户输入数据的应用程序来说，是一个非常有用的功能。 通过合理利用 beforeNavigate，可以提升用户体验，防止数据丢失，增强应用的健壮性。
