Router

이번엔 Vue Router다.

하나의 사이트에는 여러 페이지들이 존재한다.
대부분 a링크를 이용하여 기능을 구현한다.
Vue에서 제공하는 Router는 이러한 페이지들을 이동하는 기능을 제공한다.

Router를 이용하려면 cdn 방식을 이용하거나, node를 이용하여 package를 설치해야 한다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//or

npm install vue-router

Router 역시 Vue와 동일하게 VueRouter 객체를 생성해야한다.

new VueRouter({
   ...내용
});

내용 부분에는 페이지의 라우팅 정보를 routes: [] 방식으로 선언하며, [] 배열 안에는 각 페이지의 정보 객체가 들어간다.

ex

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

생성한 라우터는 Vue객체를 생성할 때 router라는 키의 값으로 바인딩 하면 된다.

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

이렇게 url에 /login을 입력하면 LoginComponent,
/main을 입력하면 MainComponent로 이동한다.

하지만, 사용자는 특정 상황을 제외하고 url을 입력하면서 서핑을 하진 않는다.

Login 버튼을 눌렀을때 LoginComponent로, main 버튼을 눌렀을 때 MainComponent로 이동할 수 있게 만들어보자.

    <div id="app">
        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>
        </div>
        <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 = {
            name: "Login",
            template: "<div>login</div>"
        }

        var MainComponent = {
            name: "Main",
            template: "<div>main</div>"
        }

        var router = new VueRouter({
            routes: [
                {
                    path: '/login',
                    component: LoginComponent
                },
                {
                    path:'/main',
                    component: MainComponent
                },
            ]
        });

        new Vue({
            el: '#app',
            router: router
        });
    </script>

router-link 태그를 이용해 페이지 링크를 생성하고 링크 태그 내 to="" 를 이용하여
매칭 url을 기입하면 된다.

router를 이용하는 방법은 2가지가 있다.

• 선언적 방식 네비게이션
• 프로그래밍 방식 네비게이션

router-link 태그를 이용하는 방법이 선언적 방식이고,
프로그래밍 방식은 script를 작성하여 사용한다.

// url만 필요한 경우
router.push({ path: "/login" });

// name을 지정하고 param이 필요한 경우 ({path: '/user/:userId'})
router.push({ name: 'user', params: { userId: 123 }});

// url의 쿼리 부분에 값을 추가하고 싶을 경우 (/register?plan=private)
router.push({ path: 'register', query: { plan: 'private' }});

//히스토리 항목을 추가하지 않고 탐색
router.replace({ path: "/login" });

//window.history.go(n)와 비슷하게 히스토리 스택에서 앞으로 또는 뒤로 이동하는 단계를 나타내는 하나의 정수를 매개 변수로 사용
router.go(-1);

출처 인프런 Vue.js 시작하기 - Age of Vue.js