라우트 잘 사용하기

이름을 가지는 라우트

• routes 옵션에 이름을 지정할 수 있습니다.
• /user/123 경로로 이동합니다.

// 정의
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

// 선언적 사용
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 프로그래밍적 사용
router.push({ name: 'user', params: { userId: 123 }})

이름을 가지는 뷰

• 여러 개의 뷰를 중첩하지 않고 동시에 표시할 수 있습니다.
• 여러 뷰에는 동일한 라우트에 대해 여러 컴포넌트가 필요합니다.
• components(s를 붙입니다) 옵션을 사용해야합니다.

// Main.vue
<router-view class="view one" name="header"></router-view>
<router-view class="view two"></router-view>
<router-view class="view three" name="footer"></router-view>

// router/index.js
const router = new VueRouter({
  routes: [
    {
      path: '/main',
      components: {
        default: Main,
        header: Header,
        footer: Footer
      }
    }
  ]
})

동적 라우트 매칭

• 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 자주 있습니다.
  • board/1 , board/2 와 같은 라우트에 접근할 때 라우트에 매칭된 게시판 번호를 컴포넌트에 나타낼 때 사용합니다.
• 동적 세그먼트는 콜론 : 으로 표시됩니다.
• 라우트가 일치하면 동적 세그먼트의 값은 모든 컴포넌트에서 this.$route.params 로 표시됩니다.

const Board = {
  template: '<div>게시판 번호 {{ $route.params.no }}</div>'
}

const router = new VueRouter({
  routes: [
    // 동적 세그먼트는 콜론으로 시작합니다.
    { path: '/board/:no', component: Board }
  ]
})

코드 예시 바로가기

중첩된 라우트

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

• Profile과 Posts에 접근하려면 Children 속성을 사용해야합니다.

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
} 

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다.
          path: 'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다.
          path: 'posts',
          component: UserPosts
        },
				{
					// UserHome은 /user/:id 가 일치 할 때
	        // User의 <router-view> 안에 렌더링됩니다.
	        path: '', component: UserHome 
				},
      ]
    }
  ]
})