Notice
Recent Posts
Recent Comments
초코레
뷰 라우터 본문
라우팅이란?
- 웹 페이지 간의 이동 방법을 말한다.
- 라우팅은 싱글 페이지 애플리케이션에서 주로 사용하고 있다.
- SPA(Single Page Application)
- 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션
- 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있고 더 빠르게 화면을 조작할 수 있어 사용자 경험이 향상된다.
- 뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있다.
- 프런트엔트 프레임워크를 사용하지 않고도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다.
- 대표적인 라우팅 라이브러리로는 router.js, navigo.js가 있다.
뷰 라우터란?
- 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리
- 뷰 라우터를 구현할 때 필요한 특수 태그와 기능은 다음과 같다.
- <router-link to="URL 값"> : 페이지 이동 태그
- <router-view> : 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Router Sample</title>
</head>
<body>
<div id="app">
<h1>뷰 라우터 예제</h1>
<p>
<!-- 페이지 이동 태그로 나타남 -->
<router-link to="/main">Main 컴포넌트로 이동</router-link>
<router-link to="/login">Login 컴포넌트로 이동</router-link>
</p>
<!-- URL에 따라 컴포넌트를 뿌려주는 영역 -->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<!-- 라우터 CDN 추가 -->
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
//컴포넌트 정의
var Main = { template: '<div>main</div>' };
var Login = { template: '<div>login</div>' };
//각 URL에 맞춰 표시할 컴포넌트 지정
var routes = [
{ path: '/main', component: Main },
{ path: '/login', component: Login }
];
//뷰 라우터에 routes를 삽입해 화면이 전환될 수 있게 함
var router = new VueRouter({
routes
});
//뷰 인스턴스에 라우터 추가
var app = new Vue({
router
}).$mount('#app'); //el 속성과 동일하게 인스턴스를 화면에 붙이는 역할
</script>
</body>
</html>
|
cs |
- $mount() API : el 속성과 동일하게 인스턴스를 화면에 붙이는 역할. 인스턴스를 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있다. 뷰 라우터의 공식 문서는 인스턴스 안에 el을 지정하지 않고 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내하고 있다.
여러 개의 컴포넌트를 동시에 표시할 수 있는 라우터인 네스티드 라우터와 네임드 뷰
네스티드 라우터 (Nested Router)
- 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.
- 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 구성된다.
- URL에 따라서 포함된 하위 컴포넌트가 다르게 표시된다.
- 네스티드 라우터와 기본 라우터의 차이점은 최상위 컴포넌트(루트 컴포넌트)에도 <router-view>가 있고, 최상위 컴포넌트의 하위 컴포넌트(User)에도 <router-view>가 있다는 것이다.
- 그렇기 때문에 URL에 따라 하위 컴포넌트의 내용이 바뀌게 된다.
- 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Nested Router</title>
</head>
<body>
<div id="app">
<!-- User 컴포넌트가 뿌려질 영역 -->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
//각 컴포넌트 내용을 정의
var User = {
template: `
<div>
User Component
<!-- 하위 컴포넌트가 뿌려질 영역 -->
<router-view></router-view>
</div>
`
};
var UserProfile = { template: '<p>User Profile Component</p>' };
var UserPost = { template: '<p>User Post Component</p>' };
//네스티드 라우터 내용 정의
var routes = [
{
path: '/user',
component: User,
children: [
{
path: 'posts',
component: UserPost
},
{
path: 'profile',
component: UserProfile
},
]
}
];
//뷰 라우터
var router = new VueRouter({
routes
});
//뷰 인스턴스에 라우터 추가
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
|
cs |
네임드 뷰 (Named View)
- 특정 페이지로 이동했을 때 해당 URL에 맞추어 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
- 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Named View Sample</title>
</head>
<body>
<div id="app">
<!-- 라우팅 영역 정의 -->
<router-view name="header"></router-view>
<router-view></router-view><!-- name이 없는 경우는 디폴트 -->
<router-view name="footer"></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
//컴포넌트 내용 정의
var Body = { template: '<div>This is Body</div>' };
var Header = { template: '<div>This is Header</div>' };
var Footer = { template: '<div>This is Footer</div>' };
var router = new VueRouter({
routes: [
{
path: '/', //네임드 뷰가 실행될 기본 URL
//name 속성과 컴포넌트를 연결
components: {
default: Body,
header: Header,
footer: Footer
}
}
]
})
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
|
cs |