Vue Router ?

내가 아는 라우터는 네트워크시간에 배웠던 라우터 장치 밖에 없는데.. 근데 희미하게 생각나는게 

라우터가 데이터가 가는 경로를 효율적으로 지정해준다 정도로 알고있는데 뷰에서도 경로로 사용될꺼같다는 느낌이

들었다! 그럼 함 살펴보자

 

뷰 라우터

뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다.

 

 

뷰 라우터 등록

라우터 인스턴스를 하나 생성하고 뷰 인스턴스에 등록~~

// 라우터 인스턴스 생성
var router = new VueRouter({
  // 라우터 옵션
})

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

 

뷰 라우터 옵션

• routes : 라우팅 할 URL과 컴포넌트 값 지정
• mode : URL의 해쉬 값 제거 속성

        var router = new VueRouter({
            mode : 'history' , //라우팅을 할 때 URL에 # 값을 제거
            // 페이지의 라우팅 정보
            routes : [
                //로그인 페이지 정보
                {
                    //페이지의 url 이름
                    path : '/login',
                    name : 'login',
                    //해당 url에서 표시될 컴포넌트
                    component : LoginComponent
                },
                //메인 페이지 정보
                {
                    path : '/main' ,
                    component : MainComponent
                }
            ]
        });

 

라우터 뷰

브라우저의 주소 창에서 URL이 변경되면, 앞에서 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려집니다. 이 때 뿌려지는 지점이 템플릿의 <router-view>입니다.

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

        <router-view></router-view> //여기가 컴포넌트가 뿌려지는 지점
    </div>

 

라우터 링크

화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 그게 바로 <router-link> 입니다.

개발자 도구로 확인하면 <a href>.. 이런식으로 출력된다.

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

        <router-view></router-view>
    </div>

 

 

결론은 클릭을 통해서 라우터 링크에  class="router-link-exact-active router-link-active" 생겨서 

조건에 맞는 컴포넌트가 나타난다. 기존에 html css를 통해 조건에 맞게 출력해주던 부분을 편하게 변경 가능한게

신기하다....이래서 뷰를 쓰는건가..