[인프런] 뷰 라우터

https://router.vuejs.org/installation.html

Installation | Vue Router

Installation Direct Download / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.co

router.vuejs.org

https://joshua1988.github.io/vue-camp/vue/router.html

Router | Cracking Vue.js

뷰 라우터 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM 방식 2가지가 있습니다. CDN 방식 NPM 방식 뷰 라우터 등록 뷰 라우터를 설치하고 나면 아래 코드와 같이 라우터 인스턴스를 하나 생성하고 뷰 인스턴스에 등록합니다. 뷰 라우터 옵션 위와 같이 라우터를 등록하고 나면 그 다음에 할 일은 라우터에 옵션을 정의하는 일입

joshua1988.github.io

뷰 라우터 : 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할때 상용하는 라이브러리

페이지 이동을 위한 라이브러리

- 라우터 설치 (cdn방식)

※ 순서중요! 뷰스크립트를 넣은 후에 라우터 스크립트 추가

- 라우터 인스턴스 생성

- 라우터 사용하기 위해 뷰 인스턴스에 연결

뷰 인스턴스의 router속성을 이용해 라우터 연결

※ 뷰 인스턴스에 연결했을때 라우터를 사용 할 수 있게 설정이 되는것.

라우터를 주입 후 실행을 해보면 아래와 같이 라우터가 주입이 된 것을 확인 할 수 있다.

- 라우터 속성 정의

routes : 페이지의 라우팅 정보
어떤 url로 이동했을때 어떤 페이지가 뿌려질지에 대한 정보
배열안에 페이지에 대한 정보가 담긴 객체로 이루어져 있음
- 속성
  - path : 페이지의 url
  - component : 해당 url에 표시될 컨포넌트명

- 두번째로 이동할 페이지 정보 입력

- router-view

: 페이지 url이 변경되었을때 해당 컴포넌트가 뿌려질 영역

라우터가 가지고 있는 태그, 라우터를 뷰에 연결해야만 사용이 가능하다.

- 라우터 연결을 주석처리하고 실행해보자.

콘솔창에 위와같은 에러가 발생한다.

라우터 사용시 꼭 뷰와 연결시켜줘야 한다.

- 주소창에 /login 이라고 입력하면은 아까 라우터에 정의한 login을 화면에 뿌려준다.

login이라는 url로 이동시 컴포넌트에 정의한 내용이 router-view 영역에 표현이 된것

- router-link

: 라우터에서 화면 이동을 위한 link

최종적으로 화면에 a태그로 나타나게 된다.

속성
- to="url" : 이동할 url

각 버튼을 클릭하면 router-view 부분에 url에 맞는 컴포넌트 내용이 그려진다.

현재까지 소스

<body>
    <div id="app">
        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>
        </div>
        <router-view></router-view>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"/></script> <!--  순서중요 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        var LoginComponent = {
            template: '<div>login</div>'
        }
        
        var MainComponent = {
            template: '<div>main</div>'
        }
    
    
        // 인스턴스방식으로 라우터의 내용을 뽑아 낼 수 있다. 
        var router = new VueRouter({
            // 페이지의 라우팅 정보가 들어감 
            routes: [
                { // 첫번째 페이지(로그인 페이지)에 대한 정보
                    path: '/login',  // 페이지의 url 이름
                    component: LoginComponent // 해당 url 에서 표시될 컨포넌트
                }, 
                { // 두번째 페이지(메인 페이지)에 대한 정보
                    path: '/main',  // 페이지의 url 이름
                    component: MainComponent // 해당 url 에서 표시될 컨포넌트
                }  
            ]
        });

        new Vue({
            el : '#app',
            router: router // 라우터 주입   -> router 속성에 router변수를 넣음
        });

    </script>
</body>

- 라우터 사용시 # 없애는 방법

를 없애기 위해선 라우터 속성을 이용한다.

mode : URL의 해쉬 값 제거 속성

저작자표시

'개발 > Vue.js' 카테고리의 다른 글

[인프런] 템플릿 문법 (0)	2019.08.28
[인프런] axios (0)	2019.08.28
[인프런] 같은 컴포넌트 레벨 간의 통신방법 (0)	2019.08.27
[인프런] 뷰 인스턴스에서의 this (0)	2019.08.27
[인프런] 컨포넌트간 통신방법 [props] (0)	2019.08.27