Vue Router

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

뷰 라우터 설치

프로젝트에 vue 라우터를 설치하는 방법은 CDN방식과 NPM방식 2가지가 있다.

CDN방식

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js">

NPM방식

npm install vue-router

뷰 라우터 등록

뷰 라우터를 설치하고 나면 아래 코드와 같이 라우터 인스턴스를 하나 생성하고 뷰 인스턴스에 등록한다.

//라우터 인스턴스 생성
const router = new VueRouter({
	      // 페이지의 라우팅 옵션들 작성
        routes : [
            // 로그인 페이지 정보
            {
                // 페이지의 url 이름
                path:'/login',
                // 해당 url에서 표시될 컴포넌트
                component : loginComponent
            },
            // 메인 페이지 정보
            {
                path : '/main',
                component : mainComponent
            }
        ]
});

//뷰 인스턴스에 라우터 인스턴스 등록
new Vue({
    el:"#app",
    router: router,
});

뷰 라우터 옵션

뷰 라우터 등록 후 라우터 옵션을 정의해야 한다 그중 2가지 옵션을 필수로 지정하는데

• routes : 라우팅 할 url과 컴포넌트 값 지정
  • path : page의 url
  • component : 해당 url에 이동했을때 뿌려질 컴포넌트를 연결하는 속성 (주의! components 아님!)
• mode : url의 해쉬 값 제거 속성 아래와 같이 “#”값을 mode에 history를 넣어주게되면 해당 값 제거

이 있다

const router = new VueRouter({
						mode : 'history'
            routes : [
                {
                    path:'/login',
                    component : loginComponent
                },
                {
                    path : '/main',
                    component : mainComponent
                }
            ]
        });

router-view

브라우저 url이 변경될때 앞의 routes속성에서 정의한 값에따라 해당 컴포넌트가 화면에 출력되는데 이때 뿌려지는 지점이 템플릿의 router-view이다

<div id="app">
    <!-- 뷰인스턴스에 라우터 인스턴스를 연결해야 사용가능 -->
    <router-view></router-view>
</div>

라우터 옵션에서 정의한 값에 따라 만약 /login경로로 이동할 경우 loginComponent가 router-view에 뿌려지고 반대로 /main url로 이동 할 경우 mainComponent가 router-view에 뿌려지게된다

router-link

html요소중 a태그와 같이 Vue에서 특정 경로로 이동할수있게 해주는 태그

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

to 속성에 이동하고자 하는 url 경로를 작성