Svelte-spa-router

svelte는 SPA방식으로 구동한다.

• SPA(Single Page Application): 웹사이트는 하나의 페이지로 이루어져있음. 그 페이지를 동적으로 화면을 바꿔가며 표현하는것

하나의 페이지에서 여러 페이지들의 화면을 바꾸려면 코드가 복잡해짐. 이를 해결하기 위해 svelte-spa router를 사용

 

 

[svelte-spa-router]

• 터미널에서 npm intall svelte-spa-router로 설치
• 라우팅경로 설정: 라우팅을 관리하기 위해 routes폴더를 만들어 준다
• Home.svelte파일을 만들어 주고 App.svelte파일을 수정해준다.
• 전체적인 그림은 routes폴더 안에 있는 파일들을 App.svelte에서 라우팅별로 보여주는 것

// --------------- routes/Home.svelte
<script>
	let question_list=[];
	function get_question_list() {
    	fetch("http://127.0.0.1:8000/api/question/list").then((response) => {
        	response.json().then((json) => {
            	question_list=json;
            })
        })
    }
    get_question_list();
<script>

<ul>
{#each question_list as question, index}
	<li>{index}, {question.id}, {question.subject}</li>
{/each}
</ul>


// ------------------ App.svelte
<script>
import Router from 'svelte-spa-router' //Router import
import Home from "./routes/Home.svelte" //Home.svelte를 Home으로 정의

//라우팅경로 여기에 계속 추가
const routes = {
	"/": Home
}
</script>

<Router{routes}/> // svelt-spa-router 사용(Router마다 달라지는 화면)

코드 변경 후 나타나는 화면(변함없음) 굳!