こんにちは、現役沖縄フリーランスエンジニアの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 アプリケーション開発入門
最後に
下記の表に、
フリーランスエンジニア向けの人気エージェントをまとめてみました。
エージェント選びで悩んでいる方は是非参考にしてみてくださいね★
| エージェント | 詳細 | 最高単価/月 | 設立 |
|---|---|---|---|
|
|
評判をチェック | 180万円/月 | 2011年 |
ギークスジョブ
|
評判をチェック
|
180万円/月 | 2011年 |
フォスターフリーランス
|
評判をチェック | 230万円/月 | 1996年 |
| pe-bank(pebank) | 評判をチェック | 200万円/月 | 1989年 |
|
Midworks(ミッドワークス) |
評判をチェック | 200万円/月 | 2013年 |
|
|
評判をチェック | 140万円/月 | 2005年 |
あわせて読みたい