본문 바로가기
IT/Vue.js

[vue.js] vue 라우터

로티이 2021. 2. 20. 17:45

라우팅(Routing)

라우팅 -> 웹 페이지 간의 이동 방법을 말함.

라우팅은 SPA에서 주로 사용됨.

    화면 전환이 매끄러움.

    화면 깜빡임 없이 화면전환 즉, 사용자 경험을 향상 시킬 수 있음.

    (일반적으로 브라우저에서 요청시 서버 응답을 받으면, 화면 깜빡임 발생)

뷰뿐만 아니라 리엑트, 앵귤러 모두 라우팅을 이용해 화면 전환.

 

뷰 라우터(Vue Router)

라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리.

페이지 간 이동이 자유로움

<router-link to="URL 값">페이지 이동 태그. html의 a태그 역할
<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>
        <router-link to="/main">Main 컴포넌트로 이동</router-link>
        <router-link to="/login">Login 컴포넌트로 이동</router-link>
      </p>
      <router-view></router-view> <!--갱신된 url에 해당하는 화면 출력-->
    </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({
        router
      }).$mount('#app'); //$mount()는 el 속성과 동일하게 인스터스를 화면에 붙이는 역할
    </script>
  </body>
</html>

 

예제 결과물

 

 

 

네스티드 라우터(Nested Router)

라우터로 페이지 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있음.

*nested: 중첩

<!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 >-- -->
      <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 = { // --< 2 >--
        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 = [	// --< 3 >--
        {
          path: '/user',
          component: User,
          children: [
            {
              path: 'posts',
              component: UserPost
            },
            {
              path: 'profile',
              component: UserProfile
            },
          ]
        }
      ];

      var router = new VueRouter({  // --< 4 >--
        routes
      });

      var app = new Vue({  // --< 5 >--
        router
      }).$mount('#app');
    </script>
  </body>
</html>
  1. <div di="app">에 <router-view>를 등록하여 User 컴포넌트가 뿌려질 영역 정의
  2. User, UserPost, UserProfile 컴포넌트의 내용을 각 객체에 정의.
  3. routes에서 라우터 정보를 정의 children 속성에서 url값 user/다음에 올 url에 따라 올 컴포넌트 정의
  4. 이제 뷰 라우터를 새로 하나 생성하고 앞에서 정의한 라우터 정보를 담은 객체 routes를 정의.
  5. 마지막으로 인스턴스를 하나 생성하고 라우터 정보 router를 포함. app이라는 id를 가진 요소에 인스턴스를 붙여 화면에 나타냄.

 

예제 실행 결과 화면

 

 

네임드 뷰(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>
      <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: [
          {
            path: '/', // --<4>-- 네임드 뷰가 실행될 URL을 정의하는 속성
            components: {  // --<5>-- <router-view>의 name 속성과 컴포넌트를 연결
              default: Body,
              header: Header,
              footer: Footer
            }
          }
        ]
      })

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

저작자표시 (새창열림)

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

[Vue.js] Vue 템플릿(Vue template)  (0) 2021.02.20
[vue.js] vue HTTP 통신 (Axios)  (0) 2021.02.20
[vue.js] vue component 통신  (0) 2021.02.19
[vue.js] 컴포넌트(component)  (0) 2021.02.19
[vue.js] 인스턴스(instance)  (0) 2021.02.19

'IT/Vue.js' Related Articles

티스토리툴바