Do it Vue.js 입문 정리3

라우팅이란

웹페이지간의 이동방법을 말함

라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션에서 주로 사용하고 있습니다

브라우저에서 웹페이지를 요청하면 서버에서 응답을 받아 웹페이지를 다시 사용자에게 보여주는 준비를 하는 시간동안 깜박이는데 라우팅으로 처리하면 깜빡거림 없이 화면을 전환할 수 있을뿐 아니라 더 빠르게 화면을 조작할 수 있음

싱글 페이지 애플리케이션:

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

Vue뿐만 아니라 리액트나 앵귤러 모두 라우팅을 이용하여 화면을 전환하고 있음

프런트엔드 프레임워크를 사용하지 않고 일반 HTML 파일들로도 라우팅 자바스크립트 라이브러리를 이용하여 라우팅 방식의 페이지 이동을 구현할 수 있음

대표적인 라우팅 라이브러리

router.js와 navigo.js가 있음

vue라우터

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

vue 라우터를 이용하여 vue로 만든 페이지 간에 자유롭게 이동가능

vue 라우터 태그와 기능

<router-link to="URL값"> : 페이지 이동 태그, 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 url로 이동합니다

<router-view> : 페이지 표시 태그, 변경되는 url에 따라 해당 컴포넌트를 뿌려주는 영역입니다

===기본 vue 라우터 예시===

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

        router

      }).$mount('#app');

    </script>

$mount() API는 el속성과 동일하게 인스턴스를 화면에 붙이는 역할을 합니다.

인스턴스를 생성할때 el속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수가 있습니다.

참고로, 뷰 라우터의 공식 문서는 모두 인스턴스 안에 el를 지정하지 않고 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내하고 있습니다.

라우터 URL의 해시값을 없애는 방법

vue 라우터의 기본 url 형식은 해시값을 사용합니다

만약index.html/login과 같이 해시값을 없애고 싶으면 오른쪽처럼 히스토리 모드(history mode)를 활용하면 됩니다

var router = new VueRouter({

     mode:'history',

     routes

});

네스티드 라우터

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

네임드 뷰(특정 페이지로 이동했을 때 해당 URL에 맞추어 여러개의 컴포넌트를 한번에 표시가능)

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

<router-view>에서 사용한 name속성은 예약어가 아니라 사용자가 임의로 정의할 수 있는 값

위에서 사용한 header, footer 값 모두 appHeader, appFooter라고 이름을 변경해도 동일하게 동작함

예외적으로 name속성을 지정하지 않았을때의 기본 컴포넌트는 default로 접근함