[Vue] 뷰 라우터

Do it! Vue.js

뷰 라우터

✏️ 라우팅이란?

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

라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용

• 싱글 페이지 애플리케이션(SPA)
  • 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션

 

• 라우팅을 이용하면 화면 간 전환이 매끄럽고 애플리케이션의 사용자 경험을 향상시킬 수 있음
• 라우팅 사용시 웹 페이지 요청과 응답 과정에서 화면 상 깜빡거림 없이 매끄럽게 전환 가능
• 대표적인 라우팅 라이브러리 router.js, navigo.js

 

✏️ 뷰 라우터

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

태그	설명
<router-link to="URL 값">	페이지 이동 태그, 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동
<router-view>	페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 보여주는 영역

 

<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>

• HTML 코드
  1. 각 <router-link>는 화면 상에서 [Main 컴포넌트로 이동], [Login 컴포넌트로 이동]이라는 <a> 태그로 변환되어 표시. 각 버튼을 클릭하면 to=""에 정의된 텍스트 값이 브라우저 URL 뒤에 추가
  2. <router-view>는 갱신된 URL에 해당하는 화면을 보여주는 영역. <router-view>에 나타낼 화면은 <script>에서 정의
• 스크립트 코드
  1. Main과 Login 컴포넌트에는 template 속성으로 각 컴포넌트를 구분할 수 있는 정도의 간단한 HTML 코드 정의
  2. routes 변수에는 URL 값이 /main일 때 Main 컴포넌트를, /login일 때 Login 컴포넌트를 표시하도록 정의
  3. router 변수에는 뷰 라우터를 하나 생성, routes를 삽입해 URL에 따라 화면이 전환될 수 있게 정의
  4. 마지막 부분은 새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가하는 코드. .$mount()는 el 속성과 같이 인스턴스를 화면에 붙여주는 역할
     • $mount() API란?
       • $mount() API는 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할
       • 인스턴스를 생성할 때 el 속성을 넣지 않았어도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있음
       • 뷰 라우터의 공식 문서는 모두 인스턴스 안에 el을 지정하지 않고 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내

 

• 라우터 URL의 해시 값(#)을 없애는 방법
  • 뷰 라우터의 기본 URL 형식은 해시 값을 사용. index.html#/login => index.html/login과 같이 해시 값을 없애고 싶으면 히스토리 모드(history mode)를 활용

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

 

 

✏️ 네스티드 라우터

네스티드 라우터(Nested Router)는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있음

상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조

 

<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>

User 컴포넌트를 상위 컴포넌트로 놓고 URL에 따라 UserPost 컴포넌트와 UserProfile 컴포넌트를 표시하는 코드

1. <div id="app">에 <router-view>를 등록하여 User 컴포넌트가 뿌려질 영역 정의
2. User, UserPost, UserProfile 컴포넌트의 내용을 각 객체에 정의. 컴포넌트가 전환된 것을 확인할 수 있게 template 속성 추가. User 컴포넌트의 template에 하위 컴포넌트를 표시할 <router-view>가 하나 더 있음
3. routes에 라우터 정보 정의. path 속성에는 네스티드 라우터를 실행하는 기본 URL를 /user로 설정, 상위 컴포넌트는 User 컴포넌트로 지정. children 속성에는 URL 값 /user 다음에 올 URL에 따라 표시될 하위 컴포넌트 정의. /user/posts인 경우 UserPost를 표시, /user/profile인 경우 UserProfile을 표시
4. 뷰 라우터를 하나 생성하고 앞에 정의한 라우터 정보를 담은 객체 routes 정의
5. 인스턴스를 하나 생성하고 라우터 정보 router를 포함. app이라는 아이디를 가진 요소에 인스턴스를 붙여 화면에 나타냄

 

• 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있음
• 이를 해결하기 위해 네임드 뷰 사용

 

✏️ 네임드 뷰

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

• 네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시

 

<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>

URL '/'에 의해 네임드 뷰가 바로 실행

1. <div> 태그 안에 <router-view> 3개를 추가하고 name 속성을 추가. name 속성은 아래 components 속성에 정의하는 컴포넌트와 매칭하기 위한 속성. Header 컴포넌트는 header, Footer 컴포넌트는 footer를 각각 name 속성에 값으로 지정. name 속성이 없는 두 번째 <router-view>는 default로 표시될 컴포넌트 의미
2. <script>에서 Body, Header, Footer 컴포넌트의 내용이 담길 객체 선언. 각 컴포넌트 내용에는 컴포넌트 영역이 구분될 간단한 template 속성 추가
3. new VueRouter()로 라우터를 하나 생성하고 그 안에 바로 라우터 정보를 정의
4. path는 네임드 뷰가 실행될 URL을 정의하는 속성. 애플리케이션을 실행하면 마주치는 기본 URL 값 '/'을 지정
5. components는 앞에서 <router-view>에 정의한 name 속성에 따라 표시될 컴포넌트를 정의하는 속성
6. 인스턴스를 생성한 뒤 네임드 뷰 정보를 갖고 있는 라우터 포함

 

• <router-view>에서 사용한 name 속성에는 사용자가 임의로 정의할 수 있고, name 속성을 지정하지 않았을 때의 기본 컴포넌트는 default로 접근