如何在svelte-routing中获取当前路径实现条件重定向？

方法1：直接用window.location.pathname判断 #

App作为顶层组件可直接访问浏览器原生的window.location.pathname，无需额外store或依赖，修改响应式逻辑即可实现仅根路径触发重定向：

<script>
  import {Router, navigate, Route} from "svelte-routing";
  import { user, loading } from "./lib/store";
  import Authentication from "./features/authentication/Authentication.svelte";
  import Notes from "./features/notes/Notes.svelte";
  import Read from "./features/notes/components/Read.svelte";
  import Create from "./features/notes/components/Create.svelte";
  import Folders from "./features/folders/Folders.svelte";
  
  $: if(!$loading && window.location.pathname === "/") {
    $user ? navigate("/folders") : navigate("/authenticate");
  }
</script>
{#if $loading}
  loading..
{/if}
<Router>
{#if $user}
<Route path="/notes/read/:id" let:params>
  <Read id={params.id} />
</Route>
<Route path="/notes/create" component={Create} />
<Route path="/notes" component={Notes} />
<Route path="/folders" component={Folders} />
{:else}
  <Route path="/authenticate" component={Authentication} />
{/if}
</Router>

该方式最简洁，零额外开销，直接满足需求。

方法2：用根Route封装重定向逻辑 #

把重定向逻辑隔离到专门组件中，通过路由匹配/时触发：

1. 创建RootRedirect.svelte组件：

<script>
  import { navigate } from "svelte-routing";
  import { user, loading } from "../lib/store";

  $: if(!$loading) {
    $user ? navigate("/folders") : navigate("/authenticate");
  }
</script>

2. 在App.svelte中添加根路径路由：

<Router>
{#if $user}
<Route path="/notes/read/:id" let:params>
  <Read id={params.id} />
</Route>
<Route path="/notes/create" component={Create} />
<Route path="/notes" component={Notes} />
<Route path="/folders" component={Folders} />
{:else}
  <Route path="/authenticate" component={Authentication} />
{/if}
<!-- 仅匹配根路径时执行重定向 -->
<Route path="/" component={RootRedirect} />
</Router>

这种方式符合组件化思路，逻辑隔离清晰，仅访问/时触发重定向。

方法3：监听路由history变化（进阶） #

如果需要追踪所有路由状态变化，可监听svelte-routing的history对象：

<script>
  import {Router, navigate, Route, history} from "svelte-routing";
  import { user, loading } from "./lib/store";
  import { onDestroy } from "svelte";
  import Authentication from "./features/authentication/Authentication.svelte";
  import Notes from "./features/notes/Notes.svelte";
  import Read from "./features/notes/components/Read.svelte";
  import Create from "./features/notes/components/Create.svelte";
  import Folders from "./features/folders/Folders.svelte";

  let currentPath = window.location.pathname;

  // 监听路由变化更新当前路径
  const unsubscribe = history.listen(({ location }) => {
    currentPath = location.pathname;
  });

  // 组件销毁时取消监听
  onDestroy(() => unsubscribe());

  $: if(!$loading && currentPath === "/") {
    $user ? navigate("/folders") : navigate("/authenticate");
  }
</script>
{#if $loading}
  loading..
{/if}
<Router>
{#if $user}
<Route path="/notes/read/:id" let:params>
  <Read id={params.id} />
</Route>
<Route path="/notes/create" component={Create} />
<Route path="/notes" component={Notes} />
<Route path="/folders" component={Folders} />
{:else}
  <Route path="/authenticate" component={Authentication} />
{/if}
</Router>

适合需要精细路由控制的场景，但相对前两种稍复杂。

关于store方案的说明 #

虽然用store存储路径可行，但上述方法更高效：

• 方法1直接利用浏览器API，无额外状态维护成本
• 方法2通过路由匹配天然触发逻辑，避免冗余代码
• 减少不必要的状态同步，代码更简洁

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