問題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 /* ルーティングのファイル */
========== 条件 ==========
・リストのページの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¥
完了にする!
活動記録をTweetする
実際にリンクに飛びたい場合は、`router-link`というタグを使って、href属性にはrouter.jsで設定してあるコンポーネントに紐付けよう。