Vue Routerを使ってルーティングを実装しよう！

Vue.jsの問題に挑戦しよう！

問題

「Vue Routerを使ってルーティングを実装しよう！」

サイドバーにリンクとしての機能を追加して、見本のような画面遷移を実現しよう!
========== 条件 ==========
・リストのページのURLは`/`とする。
・サンプルページのURLは`/sample`とする。

src/
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── List.vue
│ ├── ListItem.vue
│ ├── Main.vue
│ ├── NavList.vue
│ ├── Sample.vue /* サンプルページのコンポーネント */
│ └── Sidebar.vue
├── main.js
└── router.js /* ルーティングのファイル */

あらかじめエディタに書くコード

                    --- Main.vue
<template>
  <div class="main-container">
    <router-view>
      <list></list>
      <sample></sample>
    </router-view>
  </div>
</template>
<script>
import List from './List'
import Sample from './Sample'
export default {
  components: {
    List,
    Sample
  }
}
</script>
¥Vue¥

                    --- Sidebar.vue
<template>
  <div>
    <nav class="nav-list-wrapper">
      <ul class="nav-list">
        <li class="nav-list-item">
          <router-link to="/">Home</router-link>
        </li>
        <li class="nav-list-item">
          <router-link to="/sample">Sample</router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>
¥Vue¥