Vue 사용 웹 앱을 개발하기 위해 알아야하는 페이지 이동 방법을 알아보도록 하겠습니다. 페이지 이동방법은 뷰 라우터라는 것이 있습니다. 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이프러리입니다. 이것을 이용하면 뷰로 만든 페이지간 간에 자유로운 이동이 가능해 집니다.
[참고]
라우팅이란 ?
웹 페이지 간의 이동방법, 싱글 페이지 애플리케이션에서 주로 사용, 화면전환이 매끄러움, 사용자 접근성 향상
뷰 라우터를 구현하는 태그는 아래와 같습니다.
<script src="https://unpkg.com/vue-router/dist/vue-router.js"> : 라우터 라이브러리
<router-link to="URL 값"> : 페이지 이동 태그
<router-view> : 페이지 표시 태그
직접 아래 예제를 확인해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Router Sample</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>뷰 라우터 샘플</h1>
<p>
<!-- 1 : URL 값을 변경하는 태그 -->
<router-link to="/foo">Foo 이동</router-link>
<router-link to="/bar">Bar 이동</router-link>
</p>
<!-- 2 : URL 값에 따라 갱신되는 화면 영역 -->
<router-view></router-view>
</div>
<script>
// 3 : 컴포넌트 정의
var Foo = { template: '<div>foo</div>'};
var Bar = { template: '<div>bar</div>'};
// 4 : 각 URL에 맞춰 표시할 컴포넌트 지정
var routes = [
{ path:'/foo', component:Foo },
{ path:'/bar', component:Bar }
];
// 5 : 뷰 라우터 정의
var router = new VueRouter({
routes
});
// 6 : 뷰 인스턴스에 라우터 추가
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>아래는 실행 결과입니다.
뷰 기본 라우팅 방식을 이용하여 페이지를 전환하는 예제입니다.
- <router-link>는 화면 상에서 <a> 버튼 태그로 변환되어 표시됩니다. to="" 정의된 텍스트 값이 브라우저 URL 끝에 추가됩니다.
- <router-view>는 갱신된 URL에 해당하는 화면을 보여주는 영역입니다. 이곳에 나타낼 화면은 <script>에서 정의합니다.
- Foo, Bar 컴포넌트에는 template 속성으로 각 컴포넌트를 구분할 수 있는 정도의 HTML 코드를 정의합니다.
- routes 변수에는 URL 값이 /foo 일때 Foo 컴포넌트를, /bar 일때 Bar 컴포넌트를 표시하도록 정의합니다.
- router 변수에는 뷰 라우터를 생성하고, routes 를 삽입해 URL에 따라 화면이 전환될 수 있게 정의합니다.
- 새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가합니다.
$mount() API란?
el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 합니다. 인스턴스를 생성할 때 el 속성을 넣지 않아도 $mount()를 이용하면 강제로 인스턴스르 화면에 붙일 수 있습니다.
기본 코드에서는 컴포넌트 1개만 표시되기 때문에 간단합니다. 하지만 실제 구현은 화면에 여러개의 컴포넌트로 분할된 경우가 많습니다. 그럼 여러 개의 컴포넌트를 동시에 표시할 수 있는 라우터인 네스티드 라우터와 네임드 뷰 라는 두가지가 있습니다.
네스티드 라우터
네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있습니다. 상위 컴포넌트 1개에 하위컴포넌트 1개를 포함하는 구조로 구성됩니다. 아래와 같은 구조입니다.
네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시됩니다.
아래는 간단한 네스티드 라우터 코드입니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Nested Router Sample</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<p>
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/foo/profile">/user/foo/profile</router-link>
<router-link to="/user/foo/posts">/user/foo/posts</router-link>
</p>
<!-- 1 : User 컴포넌트가 뿌려질 영역 -->
<router-view></router-view>
</div>
<script>
// 2 : 컴포넌트의 내용 정의
var User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
};
const UserHome = { template: '<div>Home</div>' };
const UserProfile = { template: '<div>Profile</div>' };
const UserPosts = { template: '<div>Posts</div>' };
// 3 : 네스티드 라우팅 정의
var routes = [
{ path: '/user/:id', component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: UserHome },
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
{ path: 'profile', component: UserProfile },
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'posts', component: UserPosts }
]
}
];
// 4 : 뷰 라우터 정의
var router = new VueRouter({
routes
});
// 5 : 뷰 인스턴스에 라우터 추가
var app = new Vue({ router }).$mount('#app')
</script>
</body>
</html>아래는 실행 결과 입니다.
User 컴포넌트를 상위 컴포넌트로 놓고 URL에 따라 각각의 컴포넌트를 표시하는 코드입니다. 네스티드 라우터와 기본 라우터의 차이점은 최상위 컴포넌드에도 <router-view>가 있고, 최상위 컴포넌트의 하위 컴포넌트(User)에도 <router-view>가 있다는 것 입니다. 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 많은 컴포넌트를 표시하는데는 한계가 있습니다. 이것을 해결할 수 있는 방안이 네임드 뷰입니다.
네임드 뷰
네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식입니다. 네스티드 라우터 방식은 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만, 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시합니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Named View Sample</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 1 : 라우팅 영역 정의 -->
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>
</div>
<script>
// 2 : 컴포넌트의 내용 정의
var Body = { template: '<div>This is Body</div>'};
var Header = { template: '<div>This is Header</div>'};
var Footer = { template: '<div>This is Footer</div>'};
// 3 : 네스티드 라우팅 정의
var routes = [
{ path: '/', components: {
default : Body,
header : Header,
footer : Footer
}
}
];
// 4 : 뷰 라우터 정의
var router = new VueRouter({
routes
});
// 5 : 뷰 인스턴스에 라우터 추가
var app = new Vue({ router }).$mount('#app')
</script>
</body>
</html>아래는 실행 결과 입니다.
위 코드를 실행하면 URL 값 '/'에 의해 네임드 뷰가 바로 실행됩니다. 코드를 살펴보면 아래와 같습니다.
- <router-view>에 name 속성을 추가하는데 name 속성은 아래 components 속성에 정의하는 컴포넌트와 매칭하기 위한 속성입니다. name 속성이 없는 것은 default로 표시될 컴포넌트를 의미합니다.
- Body, Header, Footer 컴포넌트의 내용에 담길 객체를 선언합니다.
- 라우팅정보를 정의합니다.
- 뷰 라우터를 정의합니다.
- 뷰 인스턴스에 라우터를 추가합니다.
네임드 뷰를 활용하면 특정 페이지로 이동했을 때 해당 URL에 맞추어 여러 개의 컴포넌트를 한 번에 표시할 수 있습니다.
참고사이트
https://router.vuejs.org/kr/guide/#html
시작하기 | Vue Router
시작하기 Vue와 Vue 라우터를 이용해 싱글 페이지 앱을 만드는 것은 매우 쉽습니다. Vue.js를 사용한다면 이미 컴포넌트로 앱을 구성하고 있을 것입니다. Vue 라우터를 함께 사용할 때 추가로 해야하
router.vuejs.org