링크 생성

Navigation 링크 작성법

기본 사용법

기본적인 사용방법은 a태그의 href에 $url helper를 사용하는 것입니다. 아래와 같이 <a href="{$url('./파일경로')}" > $url 안쪽에 page를 기준으로해서 파일 또는 폴더 경로를 넣어 주면 되겠습니다. 위에서 예제로 든 about.svelte의 경우 pages 폴더에 바로 있으면 ./about 로 경로를 지정해 주면 됩니다. 참고로 그냥 $url('/about') 처럼 /경로로 해도 정상 작동 합니다.

<script>
import { url } from "@sveltech/routify";
</script>

<a href="{$url('./about')}" >About</a>

현재 선택된 페이지 강조하기

메뉴의 경우에 현재 선택된 페이지를 강조해서 표시해야 하는 경우가 종종 발생합니다 이럴 때 사용하는 기능이 isActive 라는 helper 입니다. 사용법은 아래와 같습니다. 예제의 경우 경로가 /about일 때 located라는 css class가 활성화 되도록 하는 기능으로 사용 되었습니다.

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

<a href={$url('./About')} class:located={$isActive('./About')}>About</a>

$each을 이용해 여러 한번에 여러 링크 생성하기

한번에 여러개의 링크를 한번에 생성하고 싶을 때는 아래처럼 ["파일경로", "링크이름"] 형태의 map을 생성해서 사용하면 됩니다. 이렇게 생성된 map을 $each를 사용하면 한번에 여러개의 메뉴를 생성할 수 있습니다.

<script>

import { url, isActive } from "@sveltech/routify";

const links = [
  ["/index", "Home"],
  ["./About", "About"],
  ["./blog", "Blog"],
];

</script>

<div class="menu-box">
  {#each links as [path, name]}
    <a href="{$url(path)}" class:located={$isActive(path)}>{name}</a>
  {/each}
</div>

[만들면서 배우는 Svelte]

만들면서 배우는 svelte