Vue Router 간단 정리 (router-link와 router-view)

Vue Router의 router-link와 router-view 간단 정리

🌩️Vue Router란?

- 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 공식 라우터 라이브러리

- url에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리

 

 

🌩️RouterLink 페이지 이동 컴포넌트

- RouterLink는 Vue Router 에서 페이지를 이동할 때 a 태그 대신 사용하는 컴포넌트다.

- 목표 위치를 to prop으로 지정한다.

- 실제로 a태그를 사용하면 <a href='어쩌구'> 등으로 하드코드되서 <router-link>를 더 선호된다.

- <router-link>는 href를 갖는 <a> 태그로 렌더링된다.

 

RouterLink의 기본 props

<router-link :to="{ path: '/abc'}" replace>이동</router-link>

- to: 링크의 대상을 전달한다.

- replace: 클릭시 router.push() 대신 router.replace()를 호출한다.

* replace는 히스토리를 남기지 않는다.

 

 

🌩️RouterView 컴포넌트를 렌더링하는 함수형 컴포넌트

- 페이지를 리로딩하지 않고 url에 매핑된 페이지를 RouterView에 렌더링할 수 있다.

- <router-view>에서 렌더링된 컴포넌트는 자체 <router-view>를 포함할 수 있다!

- 이 구조는 중첩된 라우트(Nested Routes)로 사용할 수 있다.

 

RouterView의  기본 props

<router-view name="a"></router-view>

- name: components옵션의 이름과 일치하는 컴포넌트를 렌더링한다.

 

 

🌩️중첩된 라우트 (Nested Routes)

{
    path: '/user/:id',
    component: User,
    // 중첩된 라우트
    children: [
        {
          path: 'profile',
          component: UserProfile,
        },
        {
          path: 'posts',
          component: UserPosts,
        },
    ],
},

 

- 실제로 컴포넌트는 매우 중첩된 구조로 되어있다. (컴포넌트의 컴포넌트의 컴포넌트 ... 구조)

- 특정 페이지에 특정 컴포넌트는 고정하고 특정 부분만 동적 렌더를 하기 위해서는 <router-view> 내부에 <router-view> 구조로 되어야한다. 즉, 중첩된 라우트뷰를 사용한다.

- 중첩된 <router-view>를 렌더링하려면 children 옵션을 사용한다.

 

 

🌩️빈 중첩 경로 설정

{
    path: '/user/:id',
    component: User,
    children: [
        ...,
        // 빈 중첩 경로 - UserHome 으로 이동한다
        {
          path: '',
          component: UserHome
        },
    ],
},

- url을 user/tay/profile로 접근시 User 컴포넌트 내부 Profile 컴포넌트를 불러온다.

- 하지만 user/tay로 접근 시 내부 <router-view>는 아무것도 렌더링되지 않는다.

- 이럴 때 빈 중첩 경로를 설정한다.