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

Question

类似于，但该问题是由 Svelte 错误引起的，该错误现已明显修复 - 这发生在最新的 Svelte 3.23.0 上。

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

<Router>

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

</Router>

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

ValidationError: Cannot bind to a variable declared with the let: directive

如何访问组件中的 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>

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

Svelte/yrv router: how can I access router parameters in a component?

javascript

svelte

svelte-component

svelte-3