Vue / 12강 / Router, SPA

Vue / 9강 ~ 11강 / Component Life Cycle, Directive

전 강에 이어서 작성하는 글

---

[SPA - Single Page Application]

spa는 하나의 페이지에서 어플리케이션의 여러 화면을 제공하는 웹 어플리케이션을 의미

Multi Page Application의 반대 개념으로 이용

 

매번 HTML 로딩하는 것 보다, 하나의 로딩되는 HTML에서 화면만 바꾸는 어플리케이션 구성이

여러가지 이점이 있기 때문에, SPA로 개발을 한다.

 

장점1. 퍼포먼스

장점2. 애니메이션 주기 편함

장점3. 화면의 자연스러운 교체

 

[Routing]

특정 화면에서 다른 화면으로의 이동을 의미

Single Page Application이 되려면 Routing이 물리적인 파일 로딩에 의한 화면전환이 아닌,

하나의 페이지 내 논리적인 화면 전환이 되어야함.

각 화면(혹은 화면의 구성요소)가 Component로 개발되어 있어야 함

 

Client Side(JS)에서 어떤 조건에서 어떤 화면 (Component)이 출력되어야하는지 결정되어야 함

이 부분을 지원하기 위한 라이브러리가 Router

 

[vue-router]

1.Router 설치

Router를 이용하기 위해선 vue-router를 설치해야함

vue-router는 Vue.js의 공식 라이브러리 임

 

2.Routing의 조건

URL의 Path 조건 - /이후의 것이 path

 

path - Routing 조건

Component - Routing 조건이 맞을때 출력할 컴포넌트

const routes = [
{ path : '/', component : Home },
{ path : '/login', component : LoginPage },
{ path : '/detail', component : DetailPage },
]

 

3.Router Instance 생성

 

createRouter()함수를 이용해서 라우터 인스턴스 생성

routes option에 Routing 조건을 등록

const router = createRouter({
	thistory : createWebHistory(),
    routes })

 

4.Router Instance 사용 선언

application instacne의 use() 함수로 router instance 등록

app.use(router);

 

5. router-view component 등록

Router에 의해 출력되는 Component 는 <router-view/>에 출력됨

<router-view></router-view>

 

6.router-link

화면에 출력되는 라우팅을 위한 링크

<router-link to='/login'>Go to Login</router-link>

 

7.$router.push

Routing에 의해 출력되는 Component에서는 $router 객체로 Routing과 관련된 다양한 데이터 및 함수 이용

$router.push()함수로 특정 path 조건의 component로 이동

this.$router.push('/login')

 

[vue-router parameter]

 

1.parameter 선언

parameter 값을 routing 조건에 추가할 때는 path에 콜론(:)을 추가해 명시함

{ path : '/detail/:title', component: DetailPage }

 

path 조건의 콜론(:)은 임의의 문자열 하나를 의미함

콜론(:) 뒷 문자열은 임의 문자열이며, 전달되는 데이터의 key 값으로 사용됨

콜론(:)에 의한 조건은 하나의 path 내에 여러번 나올 수 있음.

path	Matched path	전달 데이터
/users/:username	/users/kim	{ username : 'kim' }
/users/:username/posts/:postId	/users/kim/posts/123	{ username : 'kim', postId : 123 }

 

2.parameter 획득

Routing 조건에 의해 실행되는 Component에서는 parameter 값을 $route.params 객체로 획득함

title : {{$route.params.title}}

 

[Nested Routing]

Routing 조건이 복잡한 경우 Routing 조건을 중첩에 의해 선언이 가능

Routing 조건에 의해 실행된 Component 부터 다시 Routing 조건을 판단함

 

const router = new VueRouter({
routes : [
{ path : '/user/:id, component : User,
	children : [
    { ///user/:id/profile is matched
	    path : 'profile'
	    component : UserProfile},
    {
    ///user/:id/posts is matched
	    path : 'posts',
	    component : UserPosts
    }]}]
})