ABOUT ME

-

오늘 방문자
-
어제 방문자
-
전체
-
  • [Vue.js] Vue 라우터란?
    Vue 2019. 1. 20. 23:02


    뷰 라우터란?

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


     태그

    설명 

    <router-link to="URL값"> 

     페이지 이동 태그, 화면에선 <a> 태그로 치환됨

     <router-view>

     페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역




    라우팅이란? 

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


     - 페이지를 이동할때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동시 클라이언트의 라우팅을     이용하여 화면을 갱신함, 이러한 방식을 SPA라고도 함(Single Page Application)


     - 라우팅을 이용하면 화면간의 전환을 매끄럽게 할 수 있음


     - 뷰,리액트,앵귤러 모두 라우팅을 이용하여 화면을 전환함.



     예제


    - 뷰 라우터 라이브러리를 사용하기 위해서는 7행의 라우터 CDN 추가를 해준다.

    - 35행의 $mount() api는  el 속성과 같은 역할을 한다. vue 라우터 공식문서에서는  인스턴스 안에 el을 지정하지 않고, $mount()를 이용   해서 붙이는 방식으로 안내하고있음. 



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <!--vue  -->
        <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>
        <title>뷰 라우터</title>
      </head>
      <body>
     
        <div id="app1">
          <router-link to="/main"> main 컴포넌트로 이동</router-link>
          <router-link to="/login"> login 컴포넌트로 이동 </router-link>
          <hr>
         <!--해당 영역에 갱신된 URL에 해당하는 화면을   -->
          <router-view></router-view
        </div>
     
        <script>
          var Main = {template:'<div> 메인 </div>'};
          var Login = {template:'<div>로그인</div>'};
     
          var routes =[
            {path:'/main', component: Main}
            ,{path:'/login', component: Login}
          ];
     
          var router = new VueRouter({ //라우터 생성
            routes
          });
     
          var app = new Vue({ // 객체생성
            router
          }).$mount('#app1'); // el속성과 같이 동일하게 인스턴스를 화면에 붙이는 역할
        </script>
     
      </body>
    </html>
     
    cs



    결과화면


    - 누르는 링크에 따라 URL이 변하고 해당 컴포넌트를 보여 주게된다.



    URL 해시값(#) 지우기

    - 위 이미지에 URL을 보면 라우터 URL에 해시값(#)이 붙게되는대 뷰 라우터의 mode속성에 'history'를 주면 #이 없어지게 된다.


    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
     
      var router = new VueRouter({ //라우터 생성
           mode: 'hisotry' // 해시값을 없앤다.
           routes
       });
        
    </script>
     
    cs











    댓글

Designed by Tistory.