Vue-Router

Vue-router

• 라우팅 : 웹 페이지 간의 이동 방법
• Vue.js의 공식 라우터
• 라우터는 컴포넌트와 매핑
• Vue를 이용한 SPA를 제작할 때 유용하다
• URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여준다

Vue-router 설치

• CDN 방식
  • <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
• NPM 방식
  • npm install vue-router

Vue-router 연결

• routes 옵션과 함께 router instance 생성

// 라우트 컴포넌트
const Main = {
	template : '<div>Main page</div>',
};
const Board = {
	template : '<div>Boards</div>',
};

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

vue-router 이동 및 렌더링

• 네비게이션을 위해 router-link 컴포넌트 사용
• 속성은 'to' prop 사용
• 기본적으로 <router-link>는 <a> 태그로 렌더링

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