📘
만들면서 배우는 svelte
  • 1. svelte 소개
  • 2. 개발환경 설정
    • 수업 코드 및 문서 가이드 안내
    • 비주얼스튜디오 & REPL
    • 설치
  • 3. 컴포넌트 - 기본
    • 앱 구조 설명 : main.js, App.js, 폴더구조
    • 컴포넌트 기본 : 레이아웃 샘플 구성(여러 component 연동)
    • state
    • reactivity
    • 컴포넌트 통신방법용 기본 앱 코드
    • 컴포넌트 통신방법 1 : props
    • 컴포넌트 통신방법 2 : dispatch
    • 컴포넌트 통신방법 3 : context API
    • 컴포넌트 통신방법 4 : store
  • 4. 컴포넌트 - 템플릿 제어
    • {#if ...}
    • {#each ...}
    • bind
    • event
    • slot
    • lifecycle (생명주기)
  • 5. 스타일 및 효과
    • 동적 css 적용방법
    • transition : 화면전환
    • todo store 적용 3 : 컴포넌트에 store 연동
  • 6. 실습 1 - TODO 만들기
  • 7. 실습 2 - store를 통한 todo 리팩토링
  • 8. 라우터 - routify
    • 소개 & 설치
    • 라우팅 생성
    • 링크 생성
    • parameter 전달 및 받기
    • todo 서비스에 적용
  • 9. ajax 처리
    • fetch와 {#await ..} 적용
    • axios 적용
  • 10 . 기타
    • 경로 쉽게 적용하기
    • javascript 배열 조작 메서드
    • 화살표 함수
Powered by GitBook
On this page

Was this helpful?

  1. 8. 라우터 - routify

parameter 전달 및 받기

parameter 전달 방법

전달 링크 생성

값 전달을 할 링크는 다음과 같이 object(객체)를 만들어 전달 할 수 있습니다. 아래 예제로 만든 링크는 [localhost:5000/blog/123](<http://localhost:5000/blog/123>) 의 형태로 생성됩니다.

<a href={$url('/blog/:id', {id: '123'} )} }>Blog</a>

전달된 파라미터 받는 방법

앞에서 잠깐 설명 한 것 처럼 값을 받기 위해서는 폴더 내에 파일 이름을 전달받는 파라미터이름을 []로 감싸는 형태로 만들어 주면 됩니다.

만약 /blog/:id 이런 형태로 id값을 받기 위해서는 blog 폴더 아래에 [id].svelte라는 파일을 만들어 주면 됩니다. 그리고 파라미터 값이 여러 개일 경우에는 [첫번째][두번째].svelte 이런식으로 만들어 주면 됩니다.

meteorAccount
├── .meteor
├── src
│   ├── pages
│   │    ├── blog
│   │    │   ├── [id].velte    => /about/1234
│   │    │   └── index.svelte  => /about
---------------------------------

그리고 이렇게 전달된 파일은 params 라는 helper를 사용해 받을 수 있습니다. 아래 예제를 기준으로 설명드리면, 위에서 id값을 넘겼기 대문에 {$params.id} 와 같이 id값이 params helper의 하위 객체처럼 받아서 사용할 수 있습니다.

<script>
import { params } from '@sveltech/routify'
</script>

<p>param : {$params.id}</p>

Previous링크 생성Nexttodo 서비스에 적용

Last updated 4 years ago

Was this helpful?

[만들면서 배우는 Svelte]
만들면서 배우는 svelte