获取当前路径在 Svelte 路由中。

huangapple go评论55阅读模式
英文:

Get current path in svelte-routing

问题

我正在尝试访问当前路由,以便在当前路由为"/"时有条件地重定向访问者。目前我设置的方式是,如果在地址栏中键入任何路由,重定向都会发生。我目前唯一的候选解决方案是创建一个存储,保存当前路径,并使用该存储来设置导航条件,只有在存储值为"/"时才导航。但我想知道是否有更高效的方法来实现这一点?

以下是app.svelte的代码:

<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 && path=="/")的操作
  $: if (!$loading) {
    if ($user) navigate("/folders");
    else 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>

我已经尝试使用useLocation来获取当前路径。不幸的是,由于App.svelte不是路由器的子代,这不起作用,并且该函数返回undefined。

英文:

I'm trying to access the current route in order to conditionally redirect visitor incase the current route is "/". The way I have set up right now the redirection happens at any route if you type it in the addressbar. The only candidate solution I have right now is creating a store that holds the current path and using that store to set up the condition to navigate only if the store value is "/". But I am wondering if there is a more efficient way to do this?

here is app.svelte

&lt;script&gt;
  import {Router, navigate, Route} from &quot;svelte-routing&quot;;
  import { user, loading } from &quot;./lib/store&quot;;
  import Authentication from &quot;./features/authentication/Authentication.svelte&quot;;
  import Notes from &quot;./features/notes/Notes.svelte&quot;;
  import Read from &quot;./features/notes/components/Read.svelte&quot;;
  import Create from &quot;./features/notes/components/Create.svelte&quot;;
  import Folders from &quot;./features/folders/Folders.svelte&quot;;
  
  //i want to do if(!$loading &amp;&amp; path=&quot;/&quot;) below
  $: if(!$loading) {
    if($user) navigate(&quot;/folders&quot;);
    else navigate(&quot;/authenticate&quot;);
  }
&lt;/script&gt;
{#if $loading}
  loading..
{/if}
&lt;Router&gt;
{#if $user}
&lt;Route path=&quot;/notes/read/:id&quot; let:params&gt;
  &lt;Read id={params.id} /&gt;
&lt;/Route&gt;
&lt;Route path=&quot;/notes/create&quot; component={Create} /&gt;
&lt;Route path=&quot;/notes&quot; component={Notes} /&gt;
&lt;Route path=&quot;/folders&quot; component={Folders} /&gt;
{:else}
  &lt;Route path=&quot;/authenticate&quot; component={Authentication} /&gt;
{/if}
&lt;/Router&gt;

I have tried using useLocation to get the current path. unfortunately since App.svelte isn't a child of the router that doesn't work and the function is returning undefined.

答案1

得分: 0

自 1.4.0 版本以来,svelte-routing 将当前位置导出到脚本中,所以你只需要添加一个导出语句。

<script>
  // ...

  // 我想要在 !$loading && path="/" 的情况下执行

  export let location;
  // 然后在这里你可以解析位置
  // 并查找第一个 '/' 以确定你所在的路径名。

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

这是相关的问题链接:https://github.com/EmilTholin/svelte-routing/issues/62

英文:

Since 1.4.0, svelte-routing has exported the current location into the script, so all you have to do is have an export statement.

&lt;script&gt;
  // ...
  
  //i want to do if(!$loading &amp;&amp; path=&quot;/&quot;) below

  export let location;
  // then  here you can parse the location 
  // and find the first &#39;/&#39; to determine what pathname you are in.

  $: if(!$loading) {
    if($user) navigate(&quot;/folders&quot;);
    else navigate(&quot;/authenticate&quot;);
  }
&lt;/script&gt;

Here is the linked issue: https://github.com/EmilTholin/svelte-routing/issues/62

答案2

得分: 0

我发现在这种情况下,使用window.location.pathname是最直观的解决方案!

$: if (!$loading && path == "/") { 
  if ($user) navigate("/folders");
  else navigate("/authenticate");
}```

<details>
<summary>英文:</summary>

I found using window.location.pathname to be the most intuitive solution in this case!

const path = window.location.pathname;
$: if (!$loading && path == "/") {
if ($user) navigate("/folders");
else navigate("/authenticate");
}


</details>



huangapple
  • 本文由 发表于 2023年6月22日 19:27:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76531399.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定