-
05. 뷰 라우터(Router)FrontEnd/Vue.js 2021. 9. 11. 13:23반응형
1. 뷰 라우터(Router)
뷰 라우터는 뷰에서 라우팅(웹 페이지 간 이동) 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다.
태그 설명 <router-link to="URL 값"> 페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동합니다. <router-view> 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue Router Sample</title> </head> <body> <div id="app"> <h1>뷰 라우터 예제</h1> <p> <!-- 1. URL 값을 변경하는 태그 --> <router-link to="/main">Main 컴포넌트로 이동</router-link> <router-link to="/login">Login 컴포넌트로 이동</router-link> </p> <!-- 2. URL 값에 따라 갱신되는 화면 영역 --> <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> // 3. Main. Login 컴포넌트 내용 정의 var Main = { template: '<div>main</div>' }; var Login = { template: '<div>login</div>' }; // 4. 각 url에 해당하는 컴포넌트 등록 var routes = [ { path: '/main', component: Main }, { path: '/login', component: Login } ]; // 5. 뷰 라우터 정의 var router = new VueRouter({ // mode: 'history', // 뷰 라우터 URL의 해시 값(#)을 없애는 속성 routes }); // 6. 뷰 라우터를 인스턴스에 등록 var app = new Vue({ router }).$mount('#app'); </script> </body> </html>tip) $mount() API : el속성과 동일하게 인스턴스를 화면에 붙이는 역할.
(용어) 싱글 페이지 애플리케이션(SPA, Single Page Application) : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션, 화면 간 전환이 매끄러울 뿐만 아니라 사용자 경험을 향상시킨다.
2. 네스티드 라우터(Nested Router)
라우터로 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있습니다. 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 구성합니다. 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있습니다. 이 문제를 해결할 수 있는 방안으로 네임드 뷰가 있습니다.
<!DOCTYPE html> <html> <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"> <!-- 1. User 컴포넌트가 뿌려질 영역 --> <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 <!-- 2. 하위 컴포넌트가 뿌려질 영역 --> <router-view></router-view> </div> ` }; var UserProfile = { template: '<p>User Profile Component</p>' }; var UserPost = { template: '<p>User Post Component</p>' }; // 3. 네스티드 라우팅 정의 var routes = [ { path: '/user', component: User, children: [ { path: 'posts', component: UserPost }, { path: 'profile', component: UserProfile }, ] } ]; // 4. 뷰 라우터 정의 var router = new VueRouter({ routes }); // 5. 뷰 인스턴스에 라우터 추가 var app = new Vue({ router }).$mount('#app'); </script> </body> </html>3. 네임드 뷰(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"> <!-- 1. 라우팅 영역 정의 --> <router-view name="header"></router-view> <router-view></router-view> <!-- name이 없는 경우 default --> <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> // 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>' }; var router = new VueRouter({ routes: [ { path: '/', // 3. <router-view>의 name 속성과 컴포넌트 연결 components: { default: Body, header: Header, footer: Footer } } ] }) var app = new Vue({ router }).$mount('#app'); </script> </body> </html>반응형'FrontEnd > Vue.js' 카테고리의 다른 글
07. 뷰 템플릿(Template) (0) 2021.09.11 06. 액시오스(Axios) (0) 2021.09.11 04. 뷰 컴포넌트(Component) (0) 2021.09.10 03. 뷰 인스턴스(Instance) (0) 2021.09.07 02. 개발환경 설정 (0) 2021.09.07