[Vue] 10. Vue Router 기초

1. Vue Router란?

Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다.

/a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을 구현할 수 있다.

 

 

 

2. 라이브러리 불러오기

 

1. CDN 방식

<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>

 

2. NPM 방식

npm install vue-router

 

 

 

3. 실행 과정

router를 활용한 제일 기본적인 화면을 구성해보았다.

 

 

 

STEP 0. component 생성

---

const Main = {
    template:'<div>메인 페이지</div>',
};
const Board = {
    template:'<div>게시판 페이지</div>',
};

---

 

STEP 1. path & component를 맵핑하는 router instance 생성하기

---

const router = new VueRouter({
    routes:[
        {
            path: '/',
            component: Main,
        },
        {
            path: '/board',
            component: Board,
        }
    ]
})

---

 

STEP 2. router-link : a태그 설정하기

---

<router-link to="/">HOME</router-link> | 
<router-link to="/board">게시판</router-link>

---

 

STEP 3. 해당 url에 맵핑되는 component를 router가 찾아서 뿌릴 곳 지정

---

<router-view></router-view>

---

 

 

전체 코드

<div id="app">
    <router-link to="/">HOME</router-link> | 
    <router-link to="/board">게시판</router-link>

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

<script>
    const Main = {
        template:'<div>메인 페이지</div>',
    };
    const Board = {
        template:'<div>게시판 페이지</div>',
    };
    const router = new VueRouter({
        routes:[
            {
                path: '/',
                component: Main,
            },
            {
                path: '/board',
                component: Board,
            }
        ]
    })

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