Svelte - 라우팅

주제: 페이지 전환을 위한 라우팅 기능을 추가한다.

 

npm install --save svelte-routing

 

svelte-routing 을 설치

 

App.svelte 파일 수정

변경 전

 

 

src > routes 폴더 생성 후, Home.svelte 와 About.svelte 파일 만들어주기

그리고 App.svelte에 추가

<script>
	import {Router, Link, Route} from 'svelte-routing';
	import Home from './routes/Home.svelte'
	import About from './routes/About.svelte'

	export let url = '';
</script>

<Router url="{url}">
	<nav>
		<Link to="/">Home</Link>
		<Link to="/About">About</Link>
	</nav>
	<div>
		<Route path='/'><Home/></Route>
		<Route path='/About' component="{About}"></Route>
	</div>
</Router>

변경 후

 

React와 상당히 비슷한데 About을 컴포넌트 태그로 부르는게 아닌 속성으로 불러주는것이 달랐다.

 

 

 

메인을 App으로 설정하기 위해서

 

index.html body에 코드 추가

main.js에 코드 수정