[Vue] 컴포넌트의 통신 방식 ( Props, Emit )
[Vue] 템플릿 문법과 컴포넌트(component)[Vue] Vue & 인스턴스Vuevue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 JS 프레임워크이다. Vue.jsVue.js - The Progres
hong-study.tistory.com
뷰 라우터
뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다.
뷰 라우터의 설치 방법은 CDN 방식과 NPM 방식으로 총 2가지가 있다.
CDN 방식
별도의 설치 없이 아래 링크를 통해 라우터 라이브러리에 대한 정보를 불러올 수 있다.
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-router@3"></script>NPM 방식
Vue CLI로 프로젝트를 생성하거나 NPM 기반으로 프로젝트를 생성한다면 아래 명령어를 사용한다.
npm install vue-router@3Vue2의 경우는 router3를 사용하고, Vue3의 경우 router 4를 사용한다.
뷰 라우터 등록
뷰 라우터를 설치하고 나면 아래 코드와 같이 라우터 인스턴스를 하나 생성하고 뷰 인스턴스에 등록한다.
// 라우터 인스턴스 생성
var router = new VueRouter({
// 라우터 옵션
})
// 인스턴스에 라우터 인스턴스를 등록
new Vue({
router: router
})위를 보면 라우터 인스턴스를 생성할 때 해당 인스턴스를 router에 담아준다.
그리고 뷰 인스턴스에 라우터 인스턴스를 등록하기 위해서는 뷰 인스턴스 내부 속성 중 router를 이용해
위에서 선언한 router를 등록해준다.
뷰 라우터 옵션
위와 같이 라우터를 등록하고 나면 다음에 라우터 옵션을 정의해야 한다.
싱글 페이지 애플리케이션의 경우 아래와 같이 두 가지 옵션을 필수로 지정해야 한다.
- routes : 라우팅할 URL과 컴포넌트 값 지정
- mode : URL의 해쉬 값 제거 속성
new VueRouter({
mode: 'history',
routes: [
{ path: '/login', component: LoginComponent },
{ path: '/home', component: HomeComponent }
]
})mode 속성에서 history를 사용하는 것은 URL에서 #을 제거해준다.
그리고 routes에서 path와 component를 지정해줌으로써 어디로 이동하고, 어떤 컴포넌트를 사용할지 지정한다.
<div id="app">
<router-view></router-view> <!-- LoginComponent 또는 HomeComponent -->
</div>각 각의 화면으로 보내준 화면을 위와 같이 router-view 태그를 이용하여 화면에 뿌려준다.
그리고 router-link 라는 태그를 이용하여, 이동할 URL에 대한 정보를 만들어주는데, 이는 일반적인 a태그와 동일한 동작을 한다고 보면 된다.
<router-link to="이동할 URL"></router-link><body>
<div id="app">
<div>
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template : "<div>login</div>"
}
var MainComponent = {
template : "<div>main</div>"
}
var router = new VueRouter({
// 페이지의 라우팅 정보
routes : [
{
// 페이지의 url
path : "/login",
// 해당 url에서 표시될 컴포넌트
component : LoginComponent
},
{
path : "/main",
component : MainComponent
}
]
});
new Vue({
el : "#app",
router : router
});
</script>
</body>위와 같이 구성을 하면, 각 각의 router-link에는 요청 url이 들어가고 클릭 시 아래 routes에서 정의한 화면으로 이동하게 된다. 그리고 위에서 선언한 component에 대한 정보를 확인할 수 있다.
'Programming > Vue' 카테고리의 다른 글
| [Vue] 컴포넌트의 통신 방식 ( Props, Emit ) (0) | 2024.06.25 |
|---|---|
| [Vue] 템플릿 문법과 컴포넌트(component) (0) | 2024.06.25 |
| [Vue] Vue & 인스턴스 (0) | 2024.06.25 |
