ログイン
問題5

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

アイコン画像

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

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              --- 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¥
            

コメントのアイコン解説

router.jsにはrouterの主な内容としては、ここでどのリクエストが送られたら、どのコンポーネントを表示するかという情報を書いたりする。
実際にリンクに飛びたい場合は、`router-link`というタグを使って、href属性にはrouter.jsで設定してあるコンポーネントに紐付けよう。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
Vueを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる