axios

• Vue에서 권고하는 HTTP 통신 라이브러리
• Promise 기반의 HTTP 통신 라이브러리
  • Promise: 비동기 로직 처리에 유용한 자바스크립트 라이브러리. 단일 스레드인 자바스크립트에서 기다림이 필요할 때 사용한다.
• axios는 Promise 객체를 반환한다. then(), catch(), finally()에서 적절한 작업을 수행한다.

vue-router

• 라우팅: 웹 페이지 간 이동 방법
• Vue.js의 공식 라우터
• 컴포넌트와 매핑 역할
• SPA 제작 시 유용함
• routes 옵션과 함께 인스턴스 생성

const router = new VueRouter({
	routes: [
		{
			path: "/",
			component: Main,
		},
		{
			path: "/board",
			component: Board,
		},
	],
});

이동 및 렌더링

• router-link 컴포넌트를 사용하여 이동
• 속성은 ‘to’ prop 사용
• 기본적으로 <router-link>는 <a> 태그로 렌더링

<router-link to="/">HOME</router-link>
<router-link to="/board">게시판</router-link>

<!-- 현재 라우트에 맞는 컴포넌트가 렌더링된다. -->
<router-view></router-view>

이름 있는 라우트

const router = new VueRouter({
	routes: [
		{
			path: "/board",
			name: "board",
			component: Board,
		},
	],
});

<router-link :to="{name: 'board', params: {no: 3}}">3번 게시글</router-link>

프로그래밍 방식 라우터

$router.push(URL)
$router.push({ path: 'path', params: { a: 1 } })