반응형
뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리다.
페이지 변경을 위해서 DOM을 새로 갱신하는 것이 아닌 변경된 요소영역(컴포넌트)만 갱신한다.
1. 뷰 라우터 설치(CDN 방식)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
2. 뷰 라우터 등록
뷰 라우터를 설치하고 나면 아래 코드와 같이 라우터 인스턴스를 하나 생성하고 뷰 인스턴스를 동록해야한다.
<script>
// 라우터 인스턴스 생성
var router = new VueRouter({
// 라우터 옵션
})
// 뷰 인스턴스 생성
new Vue({
el : '#app',
// 뷰 인스턴스에 라우터 인스턴스 등록
router : router
})
</scipt>
3. 뷰 라우터 옵션
대부분의 SPA앱에서는 아래와 같이 2개의 옵션을 필수로 지정한다.
- routes : 라우팅 할 URL 과 컴포넌트 값 지정
- mode : URL의 해쉬 값 제거 속성(url에 '#' 제거)
var LoginComponent = {
template : '<div>login</div>'
}
var MainComponent = {
template : '<div>main</div>'
}
var router = new VueRouter({
mode : 'history',
// 페이지의 라우팅 정보 (어떤 url로 이동하고, 어떤 페이지에 뿌려줄 지)
routes : [
// 1. 로그인 페이지 정보
{
// 페이지의 url
path : '',
// 해당 url에 표시될 컴포넌트
component : LoginComponent
},
// 2. 메인 페이지 정보
{
path : '',
component : MainComponent
}
]
})
4. router-view / router-link
4-1. router-view
브라우저의 주소창에 url이 변경되면, 앞에서 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려진다. 이 때 뿌려지는 지점이 템플릿의 <router-view>다.
<!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">
<!-- 페이지url이 변경됐을 때, url에 따라서 뿌려지는 영역 : router-view -->
<!-- Vue인스턴스 안에 router인스턴스를 연결했을 때만 사용 가능! -->
<router-view></router-view>
</div>
</body>
</html>4-2. router-link
일반적으로 웹 페이지에서 페이지 이동을 할 때는 사용자가 url을 다 작성해서 이동하지 않는다. 이 때 화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 그게 바로 <router-link>다.
<!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 : 화면에 <a href=""></a>태그로 변환되서 나타남, 라우터에서 페이지 이동을 하기위한 링크태그 -->
<router-link to="/Login">Login</router-link> <!-- <a href="/Login"></a> -->
<router-link to="/Main">Main</router-link> <!-- <a href="/Main"></a> -->
</div>
</body>
</html><router-link to="이동할 url"></router-link> 를 실행하면 화면에서는 <a> 태그로 변형되서 나타난다.
반응형
'program > JavaScript' 카테고리의 다른 글
| 자바스크팁트 Promise 이해하기 (0) | 2022.12.28 |
|---|---|
| javascript 비동기 처리 및 콜백 함수 (0) | 2022.12.28 |
| Vue.js 컴포넌트란? (0) | 2022.12.27 |
| Vue.js 인스턴스란? (0) | 2022.12.26 |
| Vue.js란? (0) | 2022.12.26 |
