問題
5
Vue
Vue Routerを使ってルーティングを実装しよう！
Vueの問題に挑戦しよう！
問題
「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¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
router.jsにはrouterの主な内容としては、ここでどのリクエストが送られたら、どのコンポーネントを表示するかという情報を書いたりする。
実際にリンクに飛びたい場合は、`router-link`というタグを使って、href属性にはrouter.jsで設定してあるコンポーネントに紐付けよう。
