본문 바로가기
개발/Vue.js

04-1. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 라우터

by 개자이너 2019. 9. 6.
반응형

01. 뷰 라우터

02. 뷰 HTTP통신

01. 뷰 라우터

 

1. 라우팅

 

라우팅 : 웹 페이지 간의 이동 방법 

라우팅의 장점 

  • 화면 간 전환이 매끄럽다
  • 빠른 조작으로 어플리케이션의 사용자 경험을 향상시킬 수 있다

 

2. 뷰 라우터

 

뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리

뷰 라우터의 기능 : 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.

<router-link to = "URL 값">

페이지 이동 태그

화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동합니다.
<router-view>

페이지 표시 태그

변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다.

뷰 라우터를 이용한 페이지 이동 예제

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=divice-width, initial-scale=1.0">
    <title>Vue Router Sample</title>
  </head>
  <body>
    <div id="app">
      <h1>뷰 라우터 예제</h1>
      <p>
        <router-link to="/main">Main 컴포넌트로 이동</router-link>
        <router-link to="/login">Login 컴포넌트로 이동</router-link>
        </p>
        <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 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>

Main 컴포넌트로 이동한 화면
Login 컴포넌트로 이동한 화면

+ ) 라우터 URL의 해시 값(#)을 없애는 방법

var router = new VueRouter({
  mode: 'history',
  routes
});

히스토리 모드를 사용한다.

 

3. 여러 개의 컴포넌트를 동시에 표시할 수 있는 라우터

 

3-1. 네스티드 라우터

네스티드 라우터 (Nested Router) : 부모(최상위 컴포넌트)가 자식(하위 컴포넌트) 컴포넌트를 포함하는 구조이다. 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 하지만 한 번에 많은 컴포넌트를 표시하는데는 한계가 있다.

 

<!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</title>
  </head>
  <body>
    <div id="app">
      <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>'
        };

        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 실행화면
#/user/posts 실행화면
#/user/profile 실행화면

 

3-2. 네임드뷰(Named View)

 

네임드뷰: 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식   

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue Named Vue 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>

여러개의 컴포넌트를 한번에 표시할 수 있는 네임드 뷰

 

반응형

'개발 > Vue.js' 카테고리의 다른 글

05. 템플릿 & 프로젝트 구성  (0) 2019.09.25
04-2. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 HTTP통신  (0) 2019.09.24
03. Vue.js 개발 필수단위 - 인스턴스&컴포넌트  (0) 2019.08.26
02. Vue.js 필수 플러그인 - github  (0) 2019.08.25
01. Vue.js 소개  (1) 2019.08.22

관련글

댓글

티스토리툴바