반응형
라우팅이란?
라우팅 이란 웹 페이지 간의 이동 방법을 말함.
라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용
뷰 라우터
뷰 라우터는 뷰에서 라우팅 기능을 구현할 수있도록 지원하는 공식 라이브러리.
뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있음<router-link to="URL">
- 페이지 이동 태그. 화면에서는
<a>로 표시되며 클릭하면 to에 지정한 URL로 이동
<router-view>
- 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>뷰 라우터 실습하기</h1>
<p>
<router-link to="/main">메인 컴포넌트로 이동</router-link>
<router-link to="/login">로그인 컴포넌트로 이동</router-link>
</p>
<!-- URL값에 따라 갱신되는 화면 영역 -->
<router-view></router-view>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
// Main, Login 컴포넌트 정의
var Main = {template : "<div>main</div>"};
var Login = {template : "<div>Login</div>"};
// 각 URL에 맞춰 표시할 컨포넌트 지정
var routes = [
{path : "/main", component : Main},
{path : "/login", component : Login}
];
// 뷰 라우터 정의
var router = new VueRouter({
routes
});
// 뷰 인스턴스에 라우터 추가
var app = new Vue({
router
}).$mount("#app"); // $mount는 el속성과 같이 인스턴스를 화면에 붙여주는 역할 수행
</script>
</html>네스티드 라우터
네스티드 라우터(Nested Router)는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<router-view></router-view> <!-- User 컴포넌트가 뿌려질 영역 -->
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
var User = {
// User 컴포넌트 하위에 컴포넌트가 뿌려질 영역(<router-view>)
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>
</html>네임드 뷰
네임드뷰(Naed View)는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
네스티드 라우터 는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만,
네임드 뷰 는 같은 레벨에서 여러 개의 컴포넌트를 한번에 표시할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view> <!-- name이 없는 경우 default -->
<router-view name="footer"></router-view>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/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>"};
// <router-view>의 name 속성과 컴포넌트를 연결
var router = new VueRouter({
routes : [
{
path : "/",
components : {
default : Body,
header : Header,
footer : Footer
}
}
]
});
var app = new Vue({
router
}).$mount("#app");
</script>
</html>반응형
'프로그래밍 노트 > Vue' 카테고리의 다른 글
| 뷰(Vue) nginx 서버 설정 (0) | 2020.07.23 |
|---|---|
| Vuex란? (0) | 2019.10.17 |
| 뷰(Vue) 컴포넌트(Component) 통신 (0) | 2019.09.30 |
| 뷰(Vue) 컴포넌트(Component) (0) | 2019.09.24 |
| 뷰 라이프사이클 (Vue lifecycle) (1) | 2019.09.23 |
