router 간단 정리

 

router

뷰 라이브러리를 이용하여 싱글 페이지 어플리케이션을 구현할 때 사용하는 라이브러리 페이지 이동 관련 기능
 
 

router CDN

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

 
 

router NPM

npm i vue-router@3.5.3

 
vue2에서는 버전 꼭 명시해야함
 
 

router 등록

(1) 라우터 인스턴스 생성

var router = new VueRouter({
	// 라우터 속성 정의
});

 
 
(2) 뷰 인스턴스에 라우터 등록
(new Vue 안에 router: router)

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

 
 

router의 속성, 옵션들

(1) routes : 페이지의 라우팅(어떤 url로 어떤 페이지) 정보 (객체의 배열의 형태임)

var router = new VueRouter({
	// (1) 페이지의 라우팅 정보
	routes: [
		{
			// (2) 페이지의 url 이름
			path: '/login',
			// (3) 해당 url에서 표시될 컴포넌트
			component: LoginComponent
		},
			// 히스토리 없애기
			mode: 'history",
	]
});

 
(2) mode: 링크에 .. html#/login 여기서 # 을 빼고싶으면 mode: 'history' 를 등록하면 빠짐
 
 

router-view

<router-view></router-view>

 
Vue 인스턴스에 Router 인스턴스를 등록하여야 사용이 가능
컴포넌트가 뿌려지는 지점
즉, 페이지 이동하면 라우터 뷰가 있는 곳에 페이지가 뿌려짐
 
 

router-link

<router-link to="/login">로그인으로 이동</router-link>

라우터에서 페이지 이동을 하기 위한 링크태그 (마치 a태그처럼)