[Vue.js] 웹 앱 HTTP 통신, 라우터

Vue.js에서는 웹 앱간의 통신을 어떤식으로 할까요?

오늘은 웹페이지 간 이동을 돕는 라우터에 대해 공부해볼 예정입니다.

 

1. 라우팅이란?

• 웹 페이지 간의 이동 방법
• 현재 웹 앱 형태 중 주로 사용되는 것은 SPA(Single Page Application)
• 라우팅을 사용하면 화면 간의 전환이 매끄럽고, 화면을 조작할 수 있어 사용자 경험 향상 
• 뷰 뿐이 아닌 앵귤러, 리액트 모두 라우팅을 이용하여 화면 전환

 

2. 뷰 라우터

• 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리
• 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동 가능
• <router-link to="URL">  페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정된 URL로 이동
• <router-view>   페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역
• 예제 코드

1. <router-link>는 화면 상에서 해당 태그가 <a> 태그로 변환되어 표출되며, to="/main"에 입력한 값이 현재 URL 끝에 추가됩니다. ex) 기존 URL : ~~~/index.html  => 클릭시 URL : ~~~/index.html#/login

** 뷰 라우터의 기본 URL 형식은 해시 값을 사용한다. 만약 #이 붙는게 싫다면 히스토리 모드를 사용하면 된다.

하단 코드 중 mode : 'history' 추가 => /login으로 이동

const router = new VueRouter({
	mode : 'history',
    routes
});

2. <router-view>는 갱신된 URL에 해당하는 화면을 보여주는 영역으로 나타낼 화면은 script에서 정의

3. Main과 Login 컴포넌트에는 tempalte 속성으로 각 컴포넌트별 출력할 코드 추가

4. routes 에는 URL 값이 /main 일 경우, Main 컴포넌트를 표시하도록 정의

5. router 에는 뷰 라우터를 하나 생성하고, routes를 삽입해 URL에 따라 화면이 전환될 수 있도록 정의

 -> 뷰 라우터는 라우터 CDN을 추가해야 한다.

    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

6. 새로운 인스턴스 생성하고 라우터의 정보가 담긴 router 추가

 

* $mount() 란?

앞에서 공부한 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할

인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있음.. 뷰 라우터의 공식 문서는 모두 인스턴스 안에 el을 지정하지 않고 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내

 

 

* Do it! Vue.js 입문 책으로 공부하며 작성하는 글로 잘못된 정보가 있을 경우 댓글 달아주시면 감사하겠습니다 : )