TIL.Vue 라우터

라우팅?

라우터를 이해하기 위해서는 먼저 라우팅이 무엇인지 알아야 한다. 라우팅은 웹 페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 SPA에서 주로 사용하고 있다.

SPA 싱글 페이지 애플리케이션: 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션

라우팅을 이용하면 화면 간 전환이 매끄러울 뿐만 아니라 애플리케이션의 사용자 경험을 향상시킬 수 있다.

뷰 라우터

뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리다. 뷰 라우터를 구현할 때 아래와 같은 특수태그가 필요하다.

router-link to="URL값" : 페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동한다.
router-view:페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

🧶 뷰 라우터 사용 예시.

<p>
  <router-link to="/main">Main 컴포넌트로 이동</router-link>
 </p>
<router-view></router-view> => URL값에 따라 갱신되는 화면 영역
var Main={template:'<div>main</div>'};
var Login={template:'<div>login</div>'};
//Main,Login 컴포넌트 정의

var routes=[
  {path:'/main',component:Main},
  {path:'login',component:Login}
  ];
var router= new VueRouter({
  routes
});//뷰 라우터 정의
var app= new Vue({
  router
}).$mount('#app');
//새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가하는 코드.여기서 .$mount()는 el속성과 같이 인스턴스를 화면에 붙여주는 역할을 한다.