티스토리 뷰

Vue

Vue - router

김관장 2022. 6. 10. 18:10

1. Vue - router ?

  • routing 이란 웹 페이지간 이동 방법이며, 페이지를 이동할 때 서버에 요청해 갱신하는 것이 아니라 미리 해당 페이지를 구성해놓고 클라이언트의 라우팅을 이용하여 화면을 갱신합니다. 이러한 방식을 SPA 라고 합니다. (Vue, React, Angular .. 등에서 사용)
  • vue-router 란 Vue에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 입니다.

2. router 설치 방법

   2-1. CDN 방식

<body>

    <!-- vue를 쓰기위한 라이브러리 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
    <!-- vue router를 쓰기위한 라이브러리 -->
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    
</body>

   2-2. npm / yarn 방식

  • npm 방식 :  npm install vue-router
  • yarn 방식 :  yarn add vue-router

3. router 등록과 옵션 및 관련 태그

   3-1. router 등록 및 옵션

// router 등록 예시

<script>

    // 라우터 인스턴스 생성
    var router = new VueRouter({
      // 라우터 옵션
      mode: 'history',
      routes: [
        { path: '/login', component: LoginComponent },
        { path: '/home', component: HomeComponent }
      ]
    });

    // 인스턴스에 라우터 인스턴스를 등록
    new Vue({
      router: router
    });

</script>
  • new VueRouter({ ~ }) 를 통해 라우터 인스턴스를 생성합니다.
  • Vue에 라우터 인스턴스 등록방법은 router 속성에 등록하고자하는 라우터 인스턴스를 선언해주면 됩니다.
  • 라우터 옵션은 대부분의 SPA 앱에서는 아래 2개의 옵션을 필수로 지정합니다.
옵 션 설 명
mode   URL의 해쉬 값 제거 속성, default는 hash 모드입니다. ( 'hash', 'history' 선언 가능 ) 
routes   라우팅 할 URL과 컴포넌트 값을 지정합니다. ( path, component 와 같은 값 )

 

* hash / history 모드의 차이점

 

 - hash 모드

  • URL에서 #을 hash라고 하며 hash 모드는 페이지 이동 시 url에 /#/ 이라는 값이 들어가는 것을 말합니다.
    (ex http://127.0.0.1:5500/playground/router.html#/login)
  • 웹서버에서 # 이후의 변경에 대해서는 인식하지 못합니다. 왜냐하면 Request URL로 #을 포함해 그 이후의 부분들은 생략되어 요청이 날라가기 때문입니다. 따라서 요청이 날라가는건 최초에 한번(직접접속, 새로고침)이고 이후에 # 이후의 부분들이 바뀌어도 HTTP Request는 발생하지 않습니다.
  • #(hash)가 변경되는 걸 감지해주는 web api가 있는데 해당 기능을 통해 vue-router는 해쉬 변경을 감지하고 새로운 페이지로 페이지의 갱신없이 렌더링하는게 가능합니다.

- history 모드

  • history 모드는 평소 알던 url처럼 나옵니다. (ex https://www.tistory.com/feed)
  • 웹서버에서는 url이 바뀌는걸로 감지해 reqeust가 날라가 페이지의 로드가 이루어진다고 생각 할 수 있는데, 실제론 pushState라는 History API를 이용해 브라우저의 상단의 URL을 바꾸면서 내부적으로 request를 날리지 않고 페이지를 이동하는 흐름입니다.
  • history 모드로 정의한 url에 사용자가 직접 해당 url로 접속하면 웹서버의 route는 index.html 밖에 없기 때문에 그 이외의 route로 접근하면 404오류가 날 수 있습니다.
  • history모드를 사용하는 이유는 #(hash)가 붙은 URL은 SEO에 나쁜 영향을 미치기 때문입니다.

 

해당 차이점에 관해서는 자세한 설명이 없어서, 아래 블로그 글을 참고하여 정리하였습니다. 차이점에 대해서 궁금하신 분들은 아래 글도 읽어보시는 것을 추천드립니다!

 

SPA에서 어떻게 페이지의 이동이 이루어질까? (hash mode, history mode)

개요 vue router의 hash mode와 history mode에 대해 공부하는데 애초에 어떻게 페이지의 로드없이 페이지의 이동이 이루어지는가에 대해 궁금해져서 작성하는 글 hash mode의 페이지 이동 이하의 이미지를

heewon26.tistory.com

   3-2. router 관련 태그

 <div id="app">
        
        <router-view></router-view>

        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>
        </div>

</div>
태 그 설 명
  <router-view>   페이지 표시 태그로, 변경된 URL에 따라 해당 컴포넌트를 렌더해주는 영역입니다.
  <router-link to="url 명">   페이지 이동 태그입니다. 클릭 시 url명 으로 url을 바꿔줍니다.

4. router 실전 예제!

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    
    <div id="app">
        <!--
        현재 /login, /main URL로 이동하면 아래 정의한 router-routes에 정의한 컴포넌트를 확인 가능
        -->
        <router-view></router-view>

        <!-- router-link 테그는 페이지 이동을 위한 링크 태그 -->
        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>
        </div>

    </div>

    <script>

        let LoginComponent = {
            template: '<h1> LoginComponent </h1>'
        }

        let MainComponent = {
            template: '<h1> MainComponent </h1>'
        }

        let router = new VueRouter({
        
            // 페이지의 라우팅 정보
            routes: [
                {
                    path: '/login', // 페이지의 url 이름
                    component: LoginComponent// 해당 url에서 표시 될 컴포넌트
                },
                {
                    path: '/main',
                    component: MainComponent
                }
            ]
            
        })

        new Vue({
            el: '#app',
            router: router,
        })

    </script>
</body>

 

 

 hash / history 모드의 차이점에 대해서는 따로 공부하고 한번 더 정리 글을 작성해봐야겠다!

 

 

🔗 참고한 글

 

Cracking Vue.js

 

joshua1988.github.io

저작자표시

'Vue' 카테고리의 다른 글

Vue - method  (0) 2022.06.10
Vue - props / event emit  (0) 2022.06.08
Vue - Component  (0) 2022.06.03
Vue - Instance  (0) 2022.05.30
Vue - Vue 란?  (0) 2022.05.26
댓글