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 のような出力になる。


この記事が気に入ったらサポートをしてみませんか?