こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。
このブログでは、
僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、
ノウハウなどを書いていきます。
今回は、
- Nuxt.jsで詳細(show)と編集(edit)画面の動的ルーティングを設定する
について書いていきます。
Nuxt.jsで詳細(show)と編集(edit)画面の動的ルーティングを設定する
詰まったこと
Nuxt.jsは、_idというファイル名もしくはディレクトリにすることで、
動的ルーティングを設定できます。
今回、
study_roomsというリソースのCRUD画面を作成する際、
編集画面 (study_rooms/:id/edit) のルーティング生成で若干詰まったのでメモ。
解決策
_idというディレクトリを切って、その下にedit.vueファイルを作成する
_id.vueで NuxtChild を利用する
でOKです。
// 一覧 index -> pages/study_rooms/ index.vue // 作成 new -> pages/study_rooms/new.vue // 詳細 show -> pages/study_rooms/_id.vue <- showではなく_id.vueというファイルを作成 // 編集 edit -> pages/study_rooms/_id/edit.vue <- _idというディレクトリを切って、その下にedit.vueファイルを作成
// _id.vue
<template>
<div>
<!-- これで_idディレクトリの下にある子コンポーネント(edit.vue)を表示できる -->
<NuxtChild />
<!-- パスがeditの時は親コンポーネント(_id.vue)を表示しない -->
<div v-if="!this.$route.path.match(/edit/)">
_id.vueで表示する内容
</div>
</div>
<template>
Vue.js
やフロントエンドを学習したい方へ
自分の場合、
React.js
、Vue.js、TypeScript
はUdemyの下記コースで学習しました。
✅フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
