Vue 공부 - 뷰 라우터

기초

• <router-link to="URL"> 태그
  • 페이지 이동 태그
  • 화면에서는 <a>로 렌더링되며, 클릭하면 to에 지정한 URL로 이동
• <router-view> 태그
  • 페이지 표시 태그
  • 변경되는 URL에 따라 해당 컴포넌트가 화면에 그려지는 영역

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

중첩 라우터 (Nested routes)

• 라우터 컴포넌트 안에 하위에 라우터 컴포넌트를 중첩하여 구성하는 방식
• 실제 앱 UI는 여러 단계로 중첩된 컴포넌트로 구성

<div id="app">
  <router-view></router-view>
</div>

const User = {
  template:
    '<div>
      <h3>User 화면입니다, Path: {{ $router.params.id}}</h3>
      <router-view></router-view>
     </div>
};
const UserProfile = { template: '<div>User Profile Component</div>' };
const UserPosts = { template: '<div>User Posts Components</div>' };
const NotFound = { template: '<div>User Not Found</div>' };

const routes = [
  {
    path: '/user/:id', component: user,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      },
      {
        path: '',
        component: NotFound
      }
    ]
  }
];

const router = new VueRouter({
  routes
});

네임드 라우터

• 라우트를 탐색할 때, 이름을 지정해서 사용하는 것이 더 편리
• routes에 name 옵션을 지정할 수 있음

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

• 네임드 라우터에 링크하려면, 태그를 이용하여 전달

  <router-link :to={ name: 'user', params: {id: 123 }}">User</router-link>