Nuxt.js ルーティング(nuxt-linkによる動的切り替え)
ルーティングの定義
pagesフォルダがこのような構成だった場合、
pages/
--| index.vue
--| projects/
----| index.vue
----| _id.vue
以下のようにルーティングが定義される。
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
}, {
name: 'projects',
path: '/projects',
component: 'pages/projects.vue'
}, {
name: 'projects-id',
path: '/projects/:id?',
component: 'pages/projects/_id.vue'
}
]
}
例でいうとprojectごとにリンク先を切り替えたい場合は(以下の例はv-forで出力。idの値がそれぞれ付与されているオブジェクトprojectsDataが存在してるとして)、
<li v-for="item in $store.state.projectsData">
<nuxt-link v-bind:to="{name:'projects-id',params:{id:item.id}}">View Project</nuxt-link>
</li>
これで http://localhost:3000/projects/4 のような出力になる。
この記事が気に入ったらサポートをしてみませんか?