- 페이지를 이동할 때 사용하는 공식 라이브러리이자 기능
- 뷰에서 싱글 페이지 어플리케이션, 페이지 간 이동하는 기능을 구현할 때 사용
- 뷰 스크립트 → 뷰 라우터 순으로 import
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
Step1. router 인스턴스 생성
Step2. Vue 인스턴스 생성
Step3. Vue 인스턴스의 router 속성에 router 인스턴스 등록
결과적으로 뷰라우터의 속성을 주입하는 것과 동일
※ mode : url의 해쉬 값을 없애는 속성
※ routes : 페이지의 라우팅 정보(어떤 url로 이동했을 때 어떤 컴포넌트와 연결되는지)
- path : 페이지의 url
- component : 해당 url에서 표시될 하나의 컴포넌트를 연결하는 속성
- 라우터와 연결되는 영역
- URL이 변경되었을 때 특정 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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<!--router-link : 라우터에서 페이지 이동을 위한 링크태그-->
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div>
<!--router-view : 라우터와 연결-->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponent = {
template: '<div>main</div>'
}
var router = new VueRouter({
//routes 속성 : 페이징의 라우팅 정보(어떤 url로 이동했을 때 어떤 url이 나타날지)
//페이지의 개수만큼 객체의 형태로 배열로 담긴다.
routes : [
//1. 로그인페이지 정보
{
//페이지의 url
path: '/login',
//해당 url에서 표시될 컴포넌트
component: LoginComponent
},
//2. 메인 페이지 정보
{
path: '/main',
component: MainComponent
}
],
});
//Vue 인스턴스
new Vue({
el: '#app',
router: router //위에서 정의한 router 변수를 의미
});
</script>
</body>
</html>
|
cs |
[Vue] 컴포넌트 통신방식 응용(동일레벨 컴포넌트 / 이벤트 버스) (0) | 2021.09.19 |
---|---|
[Vue] 컴포넌트 통신방식/데이터 전달방식(props / $emit) (0) | 2021.09.17 |
[Vue] Vue 컴포넌트 (0) | 2021.09.16 |
[Vue] Vue 인스턴스 (0) | 2021.09.15 |
[Vue] Vue 프로젝트 구조 알아보기 (0) | 2021.09.13 |