Tauri-Svelte项目URL变更但页面不更新问题求助

我用tauri-svelte创建了项目，点击“2nd Page”按钮后，URL栏发生变化，但页面内容无更新。相关代码和项目结构如下：

项目文件代码 #

src/+page.svelte #

<script lang="ts">
</script>

<main id="container">
<a href="/routes">
    <button>2nd Page</button>
  </a>
</main>

src/routes/+page.svelte #

<div>
  <h1>Second Page</h1>
  <a href="/">
    <button>Home</button>
  </a>
</div>

项目文件夹结构 #

src目录下包含根页面+page.svelte，以及routes文件夹，routes文件夹内对应/routes路径的+page.svelte文件。

问题出在未使用SvelteKit的客户端导航机制，普通<a>标签在Tauri环境下仅修改了URL，但未触发SvelteKit的页面组件渲染更新。可以通过以下两种方式修复：

方式1：使用SvelteKit的goto导航函数 #

修改根页面代码，导入goto并通过点击事件触发导航：

<script lang="ts">
import { goto } from '$app/navigation';

const navigateToSecondPage = () => {
  goto('/routes');
};
</script>

<main id="container">
  <button on:click={navigateToSecondPage}>2nd Page</button>
</main>

方式2：强制启用<a>标签的客户端导航 #

SvelteKit默认会对内部路由的<a>标签做客户端导航处理，若在Tauri中失效，可添加属性强制启用：

<main id="container">
  <a href="/routes" data-sveltekit-preload-data="hover">
    <button>2nd Page</button>
  </a>
</main>

额外检查项：

• 确认tauri.conf.json中tauri > windows > webview > devtools设为true（开发环境），方便调试路由问题
• 确保tauri > security > csp配置未阻止SvelteKit客户端脚本执行

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