当我尝试在用户未登录时隐藏某些路线的页面时,效果很好。但是,一旦用户登录,当我使用svelte-routing
的{{1}}方法导航到页面时,页面将不再显示内容。但是,一旦我点击路线,它们就会变得很好。难道我做错了什么?以下是基本设置。 You can also find it on github.
navigate
您可以在下面的示例中看到,我在App.svelte
HTML标记下的Route
子句中隐藏了if-else
。当我在页面main
上并且还已经注销,然后单击“登录名”然后单击“提交”时,应该会将我带回到/somewhere
。但是直到单击链接/somewhere
为止,文本Somewhere
才显示出来。预期的结果是它会显示出来。
Somewhere
这是其他页面:
<script>
import { Router, Link, Route, navigate } from "svelte-routing"
import Login from "./Login.svelte"
import Somewhere from "./Somewhere.svelte"
import Home from "./Home.svelte"
let user = null
var previousPath
$: user
function logout() {
localStorage.clear()
user = null
navigate("/")
}
function loggedIn (event) {
if (event) {
user = { name: "George" }
navigate(previousPath, { replace: true })
}
}
function loggingIn() {
previousPath = window.location.pathname
}
</script>
<Router>
<h1>Test Login</h1>
<nav>
<Link to="/">Home</Link>
{#if user === null}
<Link to="/login" on:click={loggingIn}>Login</Link>
{:else}
<Link to="/somewhere">Somewhere</Link>
<form on:submit={logout}>
<input type="submit" value="Logout" />
</form>
{/if}
</nav>
<main>
{#if user !== null}
<Route path="/somewhere"><Somewhere /></Route>
<Route path="/"><Home /></Route>
{:else}
<p>Please login</p>
<Route path="/login"><Login on:loggedIn={loggedIn} /></Route>
{/if}
</main>
</Router>
Home.svelte
<p>Yellow!</p>
Login.svelte
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher()
function submit() {
dispatch("loggedIn", true)
}
</script>
<form on:submit={submit}>
<input type="submit" value="Submit" />
</form>
Somewhere.svelte
答案 0 :(得分:2)
经过一番调查,我发现您可以使用tick
函数,如下所示:
import { tick } from "svelte"
...
async function loggedIn (event) {
if (event) {
user = { name: "George" }
await tick()
navigate(previousPath, { replace: true })
}
}
它可以工作,但是看起来很丑。我不确定是否有更好,更清洁的方法来执行此操作,因此您必须坚持下去。
tick
是一个函数,一旦应用了任何待处理状态更改,该函数便会解析。在您的情况下,修改user
时,可以确保显示{:else}
块的内容(尽管为空),然后导航到上一个路径,这会导致在{{ 1}}。