Как создавать ссылки на маршруты с помощью Svelte Routify - PullRequest
Новая
       80

Как создавать ссылки на маршруты с помощью Svelte Routify

1 голос
/ 07 августа 2020

Я учусь использовать Routify для подключения некоторых маршрутов и ссылок. Мне нужна помощь.

В документации Routify написано:

«Ссылки могут обрабатываться множеством различных способов. Это может быть самый простой способ».

через : https://routify.dev/guide/navigation

Затем он дает следующий пример: 

<script>
  import {isActive, url} from '@sveltech/routify'

  const links =
  [
    ['./index', 'Home'], //add index if you don't want siblings to be considered children
    ['./blog', 'Blog'],
    ['./about', 'About'],
    ['./contact', 'Contact']
  ]
</script>

<style>
  .active {font-weight: bold}
</style>

<ul>
  {#each links as [path, name]}
    <!-- Svelte magic. If isActive is true, the "active" class is applied. -->
    <li class:active={$isActive(path)}>
      <a href={$url(path)}>
        {name}
      </a>
    </li>
  {/each}
</ul>

К сожалению, он не дает никаких инструкций о том, как подключить это к вашему приложению (если это слишком сложно для меня, чтобы понять).

Я использую шаблон Routify и скопировал приведенный выше код в следующий каталог:

pages / _components / Navigation .svelte

Затем я попытался импортировать его в pages / index.svelte следующим образом:

pages / index.svelte 

 <script>

  import Navigation from './_components/Navigation.svelte';

</script>

<div>
  <Navigation/>


</div>

Ссылки отображаются вверху страницы. Когда я нажимаю на них, конечная точка следует этому шаблону: 

http://localhost:5000/index/home

http://localhost:5000/index/blog

http://localhost:5000/index/about

http://localhost:5000/index/contact

В моем каталоге / pages у меня есть страницы, которые соответствуют страницам, указанным в коде, например:

/ pages / Home.svelte

Когда я нажимаю ссылки, мой браузер остается на той же странице и не встраивает страницу, связанную со ссылкой. Кроме того, инструменты разработчика моего браузера говорят: 

Uncaught Error: Route could not be found for "/index/home".
    at urlToRoute (urlToRoute.js:15)
    at updatePage (navigator.js:13)
    at pushstate (navigator.js:60)
    at History.history.<computed> [as pushState] (navigator.js:51)

Что мне нужно сделать, чтобы я мог видеть соответствующие страницы, и почему их промежуточный каталог называется "index"? Как мне избавиться от слова "индекс" в URL-адресе?

ОБНОВЛЕНИЕ

Хорошо, у меня есть навигация, указанная на всех страницах и частично работающая.

У меня есть код навигации (ниже) импортировано в pages / _layout.svelte .

Код выглядит следующим образом:

pages / _layout.svelte 

<script>
    import Navigation from './_components/Navigation.svelte';
</script>

<!--TABS-->

<Navigation/>

pages / _components / Navigation.svelte 


<script>
  import {isActive, url} from '@sveltech/routify'

  const links =
  [
    ['./index', 'Home'], //add index if you don't want siblings to be considered children
    ['./form', 'Form']
  ]
</script>

<style>
  .active {font-weight: bold}
</style>

<ul>
  {#each links as [path, name]}
    <!-- Svelte magic. If isActive is true, the "active" class is applied. -->
    <li class:active={$isActive(path)}>
      <a href={$url(path)}>
        {name}
      </a>
    </li>
  {/each}
</ul>

Ссылки навигации появляются, но теперь проблема в том, что содержимое выбранной страницы не отображается.

На изображении ниже отображается конечная точка формы. Компонент формы работает HTML, но HTML не отображается на странице.

Я также получаю предупреждение в моих инструментах разработчика, в котором говорится: «получил неожиданный слот» по умолчанию

введите описание изображения здесь

1 Ответ

1 голос
/ 07 августа 2020

Вам не следует импортировать компонент навигации в файл index.svelte, а вместо этого в файл _layout.svelte в том же каталоге.

Они показывают настройку в приложении TV Shows и хотя они не показывают приведенный выше код, импортированный в файл Nav, как вы пытаетесь, он будет работать, если компонент с приведенным выше кодом будет импортирован в файл _layout, поскольку помощник URL-адреса разрешает пути относительно страницы / макета в который он используется.

Импорт в индексный файл создает пути относительно индексного файла, поэтому вы видите индекс во всех маршрутах.

UPDATE:

In ответ на необходимость отобразить содержимое каждой страницы. Это делается с помощью слота в файле _layout, в вашем примере это будет выглядеть так: 

<Navigation/>

<main>
  <slot />
</main>
...