Vue Router
๋ผ์ฐํ (Routing)์ด๋ ์น ํ์ด์ง ๊ฐ์ ์ด๋ ๋ฐฉ๋ฒ์ ๋งํ๋ค. ๋ผ์ฐํ ์ SPA(Single Page Application)์์ ์ฃผ๋ก ์ฌ์ฉํ๊ณ ์๋ค.
SPA
ํ์ด์ง๋ฅผ ์ด๋ํ ๋๋ง๋ค ์๋ฒ์ ์น ํ์ด์ง๋ฅผ ์์ฒญํด ์๋ก ๊ฐฑ์ ํ๋ ๊ฒ์ด ์๋๋ผ ๋ฏธ๋ฆฌ ํด๋น ํ์ด์ง๋ค์ ๋ฐ์ ๋๊ณ ํ์ด์ง ์ด๋ ์์ ํด๋ผ์ด์ธํธ์ ๋ผ์ฐํ ์ ์ด์ฉํด ํ๋ฉด์ ๊ฐฑ์ ํ๋ ํจํด์ ์ ์ฉํ ์ ํ๋ฆฌ์ผ์ด์
๋ผ์ฐํ ์ ์ด์ฉํ๋ฉด ํ๋ฉด๊ฐ์ ์ ํ์ด ๋งค๋๋ฌ์ฐ๋ฉฐ, ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์ ์ํฌ ์ ์๋ค.
๋ทฐ ๋ผ์ฐํฐ
๋ทฐ ๋ผ์ฐํฐ๋ ๋ทฐ์์ ๋ผ์ฐํ ๊ธฐ๋ฅ์ ๊ตฌํํ ์ ์๋๋ก ์ง์ํ๋ ๊ณต์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
ํ๊ทธ
์ค๋ช
\
ํ์ด์ง ์ด๋ ํ๊ทธ. ํ๋ฉด์์๋ <a>
๋ก ํ์๋๋ฉฐ ํด๋ฆญํ๋ฉด to์ ์ง์ ํ URL๋ก ์ด๋ํ๋ค.
\
ํ์ด์ง ํ์ ํ๊ทธ. ๋ณ๊ฒฝ๋๋ URL์ ๋ฐ๋ผ ํด๋น ์ปดํฌ๋ํธ๋ฅผ ๋ฟ๋ ค์ฃผ๋ ์์ญ์ด๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Router</title>
</head>
<body>
<div id="app">
<h1>๋ทฐ ๋ผ์ฐํฐ ์์ </h1>
<p>
<router-link to="/main">Main component๋ก ์ด๋</router-link>
<router-link to="/login">Login component๋ก ์ด๋</router-link>
</p>
<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 Main = { template: '<div>main</div>' }
var Login = { template: '<div>login</div>' }
var routes = [
{ path: '/main', component: Main},
{ path: '/login', component: Login}
];
var router = new VueRouter({
routes
});
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
<router-link>
๋ ํ๋ฉด์์์<a>
ํ๊ทธ๋ก ๋ณํ๋์ด ํ์๋๋ค.
<a href="#/main" class="">Main component๋ก ์ด๋</a> <a href="#/login" class="router-link-exact-active router-link-active">Login component๋ก ์ด๋</a>
router-view
๋ ๊ฐฑ์ ๋ URL์ ํด๋นํ๋ ํ๋ฉด์ ๋ณด์ฌ์ฃผ๋ ์์ญ์ด๋ค.routes ๋ณ์์๋ URL ๊ฐ์ ์ ์ํ๋ค.
router ๋ณ์์๋ ๋ทฐ ๋ผ์ฐํฐ๋ฅผ ์์ฑํ๊ณ , routes๋ฅผ ์ฝ์ ํด URL์ ๋ฐ๋ผ ํ๋ฉด์ด ์ ํ๋ ์ ์๊ฒ ์ ์ํ๋ค.
$mount()
API๋ el ์์ฑ๊ณผ ๋์ผํ๊ฒ ์ธ์คํด์ค๋ฅผ ํ๋ฉด์ ๋ถ์ด๋ ์ญํ ์ ํ๋ค. ์ธ์คํด์ค ์์ฑ์ el ์์ฑ์ ๋ฃ์ง ์์๋๋ผ๋ ์์ฑํ๊ณ ๋์ $mount()๋ฅผ ์ด์ฉํ๋ฉด ๊ฐ์ ๋ก ์ธ์คํด์ค๋ฅผ ํ๋ฉด์ ๋ถ์ผ ์ ์๋ค.
๋ทฐ ๋ผ์ฐํฐ์ ๊ธฐ๋ณธ URL ํ์์ ํด์ ๊ฐ์ ์ฌ์ฉํ๋ค. ๋ง์ฝ ํด์๊ฐ์ ์์ ๊ณ ์ถ์ผ๋ฉด ์๋์ ๊ฐ์ด history ๋ชจ๋๋ฅผ ์ฌ์ฉํ๋ฉด๋๋ค.
var router = new VueRouter({
mode: 'history',
routes
});
Nested Router
Nested Router๋ ๋ผ์ฐํฐ๋ก ํ์ด์ง๋ฅผ ์ด๋ํ ๋ ์ต์ 2๊ฐ ์ด์์ ์ปดํฌ๋ํธ๋ฅผ ํ๋ฉด์ ๋ํ๋ผ ์ ์๋ค. Nested Router๋ ์์ ์ปดํฌ๋ํธ 1๊ฐ์ ํ์ ์ปดํฌ๋ํธ 1๊ฐ๋ฅผ ํฌํจํ๋ ๊ตฌ์กฐ์ด๋ค.

Nested Router๋ฅผ ์ด์ฉํ๋ฉด URL์ ๋ฐ๋ผ์ ์ปดํฌ๋ํธ์ ํ์ ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅด๊ฒ ํ์๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue Nested Router</title>
</head>
<body>
<div id="app">
<!-- User Component๊ฐ ๋ฟ๋ ค์ง ์์ญ -->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
var User = {
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>'};
// Nested Routes
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>
</body>
</html>
User Component๋ฅผ ์์ ์ปดํฌ๋ํธ๋ก ๋๊ณ , URL์ ๋ฐ๋ผ์ UserPost Component์ UserProfile Component๋ฅผ ํ์ํ๋ ์ฝ๋์ด๋ค.
Nested Router์ Router์ ์ฐจ์ด์ ์ ์ต์์(root) ์ปดํฌ๋ํธ์๋ <router-view>
๊ฐ ์๊ณ , ํ์ ์ปดํฌ๋ํธ(User Component) template์ ํ์ ์ปดํฌ๋ํธ๋ฅผ ํ์ํ <router-view>
๊ฐ ํ๋ ๋ ์๋ค๋ ์ ์ด๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ URL์ ๋ฐ๋ผ ํ์ ์ปดํฌ๋ํธ ๋ด์ฉ์ด ๋ฐ๋๊ฒ ๋๋ค.
Named View
Named View๋ ํน์ ํ์ด์ง๋ก ์ด๋ํ์ ๋ ์ฌ๋ฌ ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ๋์์ ํ์ํ๋ ๋ผ์ฐํ ๋ฐฉ์์ด๋ค. Named View๋ ๊ฐ์ ๋ ๋ฒจ์์ ์ฌ๋ฌ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ํ๋ฒ์ ํ์ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Named View Sample</title>
</head>
<body>
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/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>' };
var router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Body,
header: Header,
footer: Footer
}
}
]
})
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
์ฌ๊ธฐ์ name
์์ฑ์ ์ง์ ์ํด์ฃผ๋ฉด default๋ก ํ์๋ ์ปดํฌ๋ํธ๋ฅผ ์๋ฏธํ๋ค.
Named View๋ฅผ ํ์ฉํ๋ฉด ํน์ ํ์ด์ง๋ก ์ด๋ํ์ ๋ ํด๋น URL์ ๋ง์ถ์ด ์ฌ๋ฌ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ํ๋ฒ์ ํ์ํ ์ ์๋ค.
Last updated
Was this helpful?