뷰를 이용하여 싱글 페이지 애플리케이션을 제작할 때 유용한 라우팅 라이블리, 뷰 코어 라이브러리와 함께 공식 라이브러리로 지원되고 있다.
설치는 NPM과 CDN 방식 모두 지원한다.
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> // CDN
npm install vue-router --save //NPM
예제
<body>
<div id='app'>
<h1>뷰 라우터 예제</h1>
<p>
<router-link to="/main">Main 컴포넌트로 이동 </router-link>
<router-link to="/login">login 컴포넌트로 이동</router-link> // URL 값을 변경하는 태그
</p>
<router-view></router-view> // URL값에 따라 갱신되는 화면 영역
<script src="https://unpkg.com/vue@3/dist/vue.esm-browser.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
const Main = {template : '<div>Main</div>'};
const Login = {template : '<div>Login</div>'};
// Main, Login 컴포넌트 정의
const routes = [
{ path : '/main', component : Main},
{ path : '/login', component : Login}
// 각 URL에 맞춰 표시할 컴포넌트 지정
];
const router = new VueRouter({
routes // 뷰 라우터 정의
});
const app = new Vue({
router
}).$mount('#app');
// 뷰 인스턴스에 라우터 추가
</script>
</body>
** 뷰 라우터의 기본 URL 형식은 해시 값을 사용한다. 만약 #이 붙는게 싫다면 히스토리 모드를 사용하면 된다.
하단 코드 중 mode : 'history' 추가 => /login으로 이동
const router = new VueRouter({
mode : 'history',
routes
});
2. 는 갱신된 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>
앞에서 공부한 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할
인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있음.. 뷰 라우터의 공식 문서는 모두 인스턴스 안에 el을 지정하지 않고 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내
라우터로 화면을 이동할 때 네스티드 라우터를 이용하여 지정된 하위 컴포넌트를 표시할 수 있다.
이때 컴포넌트의 구조는 가장 큰 상위의 컴포넌트가 하위의 컴포넌트를 포함하는 Parent - child 형태와 같다.
<!-- localhost:5000 -->
<div id="app">
<router-view></router-view>
</div>
<!-- localhost:5000/home -->
<div>
<p>Main Component rendered</p>
<app-header></app-header>
</div>
// 'localhost:5000/home'에 접근하면 Main과 Header 컴포넌트 둘다 표시된다.
{
path : '/home',
component: Main,
children: [
{
path: '/',
component: AppHeader
},
{
path: '/list',
component: List
},
]
}
특정 URL로 이동했을 때 여러 개의 컴포넌트를 동시에 표시할 수 있는 방법이다.
<div id="app">
<router-view name="appHeader"></router-view>
<router-view></router-view>
<router-view name="appFooter"></router-view>
</div>
{
path : '/home',
// Named Router
components: {
appHeader: AppHeader,
default: Body,
appFooter: AppFooter
}
},