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

Question

問題5：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¥

Answer 1

解答ソースコード

              --- router.js
import Vue from 'vue'
import Router from 'vue-router'
import Sample from './components/Sample'
import List from './components/List'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'list',
      component: List
    },
    {
      path: '/sample',
      name: 'sample',
      component: Sample
    }
  ]
})
¥Vue¥

              --- Main.vue
import Vue from 'vue'
import App from './App.vue'
import router from './router' /* 追加 */
Vue.config.productionTip = false
new Vue({
  router,  /* 追加 */
  render: h => h(App),
}).$mount('#app')

¥Vue¥

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

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

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

期待する画面

解答ソースコード

解説