Svelte/yrv 路由器:如何访问组件中的路由器参数?

Question

类似于如何绑定用Svelte let指令声明的变量？，但该问题是由现在显然已修复的Svelte错误引起的 - 这发生在Svelte 3.23.0上，这是最新的可用。

我正在使用Svelte和yrv路由器。我希望能够访问组件内的router变量，特别是slug参数。

<Router>
<Route exact path="/:slug" let:router>
<WorkDetail {works} bind:slug={router.params.slug} />
Hey {router.params.slug}!
</Route>
</Router>

当我构建这个时，Svelte抱怨道：

验证错误：无法绑定到使用 let： 指令声明的变量

如何访问组件中的router参数？

Answer 1

你不必在这里bind:，只要做

<WorkDetail {works} slug={router.params.slug} />

如果要在外部组件上使用router，则可以立即调用一个方法来设置它，如下所示：

<script>
// ...
let router;
function setRouter(r) {
router = r;
return '';  // the return value of this method call will be rendered, prints undefined if we don't return someting
}
</script>
<Router>
<Route exact path="/:slug" let:router>
{setRouter(router)}
<WorkDetail {works} slug={router.params.slug} />
Hey {router.params.slug}!
</Route>
</Router>

这是一个简单的 REPL： https://svelte.dev/repl/a5ab1904ecdd47b39c3575125f95d9d6?version=3.23.0

Answer 2

您可以使用 PROPS 对子组件使用

例

App.svelte

<script>
import {Router,Route,Link} from 'yrv'
import Food from './Food.svelte'
</script>

<Router>
<Route path="/about/:name">
<About name={router.params.name}/>
</Route>
</Router>

在子组件中

<script>
export let name;
</srcipt>
<p>HERE params : {name}</p>