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

【问题标题】：Svelte/yrv router: how can I access router parameters in a component?Svelte/yrv 路由器：如何访问组件中的路由器参数？
【发布时间】：2020-09-25 14:51:26
【问题描述】：

与How to bind variable declared with Svelte let directive? 类似，但该问题是由一个 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: 无法绑定到使用 let: 指令声明的变量

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

【问题讨论】：

标签： javascript svelte svelte-3 svelte-component

【解决方案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

【讨论】：

【解决方案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>

【讨论】：