Маршрутизатор Svelte / yrv: как мне получить доступ к параметрам маршрутизатора в компоненте?

Подобно Как связать переменную, объявленную с помощью директивы Svelte let?, но эта проблема была вызвана ошибкой 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
person mikemaccana    schedule 06.06.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вам не нужно 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

person Andreas Dolk    schedule 07.06.2020

arrow_upward
1
arrow_downward

вы можете использовать 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>
person bobwatcherx    schedule 03.04.2021