今すぐ登録したい方へ
このブログから登録の多いエージェントは下記の3つです★
(リンクをクリックすると公式サイトに飛びます)
✅【ダントツの1位】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】
こんにちは、mah(@RailsRubyMah6h)です。
このブログでは、
僕が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 アプリケーション開発入門
最後に
下記の表に、
フリーランスエンジニア向けの人気エージェントをまとめてみました。
エージェント選びで悩んでいる方は是非参考にしてみてくださいね★
エージェント | 詳細 | 最高単価/月 | 設立 |
---|---|---|---|
エミリーエンジニア(emilee)
![]() |
評判をチェック | 100万円/月 | 2007年 |
ギークスジョブ
![]() |
評判をチェック
![]() |
100万円/月 | 2007年 |
フォスターフリーランス |
評判をチェック | 230万円/月 | 1996年 |
PE-BANK(pebank)
![]() |
評判をチェック | 200万円/月 | 1989年 |
Midworks(ミッドワークス) |
評判をチェック | 200万円/月 | 2013年 |
レバテックフリーランス |
評判をチェック |
140万円/月 | 2005年 |
あわせて読みたい
最後までお読み頂きありがとうございました★
もしよかったらTwiiterのフォローもお願いします★