Vue Router

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

참고하면 좋을 사이트

router.vuejs.org/kr/installation.html

router.vuejs.org/kr/api/#router-link

<Vue Router>

1. Routing

라우팅이란 웹 페이지 간의 이동 방법을 말한다.
라우팅을 이용하면 화면 간의 전환이 매끄럽게 처리할 수 있다.
프론트엔드 프레임워크(뷰, 리액트, 앵글러) 모두 라우팅을 이용하여 화면을 전환하고 있다.
프론트엔드 프레임워크를 사용하지 않고, 일반 HTML파일들로도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있다.

2. Vue Router

뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.

태그	설명
<router-link to="URL값">	페이지 이동 태그 화면에서는 <a>로 표시된다.
<router-view>	페이지 표시 태그 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역이다.

ex)

<!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>
        <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>
      // 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({
        routes
      });

      // 6. 뷰 라우터를 인스턴스에 등록
      var app = new Vue({
        el: '#app',
        router: router
      });
    </script>
  </body>
</html>

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

1) Nested Router

라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.
상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조이다.
URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시된다.

ex)

<!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>
    
      //2.컴포넌트 내용 정의
      var User = {
        template: `
          <div>
            User Component
            //3. 하위 컴포넌트가 뿌려질 영역
            <router-view></router-view>
          </div>
        `
      };
      var UserPost = { template: '<p>User Post Component</p>' };
      var UserProfile = { template: '<p>User Profile Component</p>' };
      
      //4. 네스티드 라우팅 정의
      var routes = [
        {
          path: '/user', component: User,
          children: [
            {
              path: 'post',
              component: UserPost
            },
            {
              path: 'profile',
              component: UserProfile
            },

          ]
        }
      ];
      
      //5. 뷰 라우터 정의
      var router = new VueRouter({
        routes
      });

      //6. 뷰 인스턴스에 라우터 추가
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

2) Named Vue

특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.
같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시하는 구조이다.

ex)

<!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>
  
    //1. 라우팅 영역 정의
    <div id="app">
      <router-view name="header"></router-view>
      <router-view></router-view> //name이 없는 경우는 디폴트
      <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>' };
      
      //3. 라우터 정의
      var router = new VueRouter({
        routes: [
          {
            //4. 네임드 뷰가 실행될 URL정의
            path: '/',
            //5. <router-view>의 name속성과 컴포넌트를 연결
            components: {
              default: Body,
              header: Header,
              footer: Footer
            }
          }
        ]
      })

      //6. 인스턴스 생성, 네임드 뷰 정보를 갖고 있는 라우터를 포함
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

저작자표시 비영리 변경금지

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

Vue의 template속성 (0)	2020.07.04
뷰 HTTP 통신 (0)	2020.07.02
Vue Componets 통신 (0)	2020.07.02
Vue Componets (0)	2020.07.02
Vue Instance (0)	2020.07.01

winnih_B

LINKS

CATEGORY

Vue Router

<Vue Router>

1. Routing

2. Vue Router

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

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

티스토리툴바

Vue Router

<Vue Router>

1. Routing

2. Vue Router

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

'💻WEB FrontEnd > 프레임워크 Vue' 카테고리의 다른 글

'💻WEB FrontEnd/프레임워크 Vue' Related Articles

티스토리툴바