如何在打开同一路由时刷新SvelteKit页面状态？

网站顶部菜单栏包含各页面链接，用户在某页面修改状态（如填写表单、点击计数器）后，再次点击该页面的菜单链接，期望页面重置为初始状态，但实际状态并未重置。以计数器页面为例：

<script>
let count=0;
</script>

count: {count}
<button on:click={() => (count += 1)}>+</button>

从页面A进入计数器页面，点击+按钮后再次点击计数器页面链接，count仍为1；但返回页面A再重新进入时，SvelteKit识别路由变化，count会重置为0。需要实现：即使路由不变，点击菜单链接也能触发状态重置。

方案1：监听导航事件，直接重置状态 #

在目标页面中使用beforeNavigate监听导航行为，当目标路由与当前路由相同时，手动重置组件状态：

<script>
import { beforeNavigate } from '$app/navigation';
let count = 0;

beforeNavigate(({ to }) => {
  // 检查目标路由是否和当前页面一致
  if (to?.href === window.location.href) {
    count = 0; // 重置本地状态
  }
});
</script>

count: {count}
<button on:click={() => count += 1}>+</button>

方案2：修改菜单链接的点击逻辑 #

在菜单组件中拦截当前页面链接的点击事件，手动触发页面状态重置：

菜单组件代码

<script>
import { page } from '$app/stores';

function handleMenuClick(e, targetHref) {
  // 判断是否点击的是当前页面链接
  if (targetHref === $page.url.href) {
    e.preventDefault(); // 阻止默认导航行为
    // 发送自定义事件通知目标页面重置状态
    window.dispatchEvent(new CustomEvent('reset-current-page'));
  }
}
</script>

<nav>
  <a href="/" on:click={(e) => handleMenuClick(e, '/')}>首页</a>
  <a href="/counter" on:click={(e) => handleMenuClick(e, '/counter')}>计数器</a>
</nav>

目标页面（计数器）代码

<script>
import { onDestroy } from 'svelte';
let count = 0;

function resetState() {
  count = 0;
}

// 监听自定义重置事件
window.addEventListener('reset-current-page', resetState);

// 组件销毁时移除监听，避免内存泄漏
onDestroy(() => {
  window.removeEventListener('reset-current-page', resetState);
});
</script>

count: {count}
<button on:click={() => count += 1}>+</button>

方案3：结合load函数与invalidate重置状态 #

如果状态是通过页面load函数传递的，可以调用invalidate强制重新执行load，重置初始状态：

计数器页面的+page.server.js

export function load() {
  return {
    initialCount: 0
  };
}

计数器页面的+page.svelte

<script>
import { beforeNavigate, invalidate } from '$app/navigation';
export let data;
let count = data.initialCount;

beforeNavigate(({ to }) => {
  if (to?.href === window.location.href) {
    // 触发load函数重新执行，更新初始状态
    invalidate('/counter');
    count = data.initialCount;
  }
});
</script>

count: {count}
<button on:click={() => count += 1}>+</button>

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