スリ飯屋MaLankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

Nuxt.jsで詳細(show)と編集(edit)画面の動的ルーティングを設定する

Nuxt.jsで詳細(show)と編集(edit)画面の動的ルーティングを設定する




今すぐ登録したい方へ


このブログから登録の多いエージェントは下記の3つです★

(リンクをクリックすると公式サイトに飛びます)

【ダントツの1番人気】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】

【僅差で2位】エミリーエンジニア【4人に1人が初めてのフリーランス】

【惜しくも3位】レバテックフリーランス【業界最大手。素早く手厚いフォローで案件参画】




こんにちは、mahです。


このブログでは、

僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、

ノウハウなどを書いていきます。


今回は、


  • Nuxt.jsで詳細(show)と編集(edit)画面の動的ルーティングを設定する


について書いていきます。




Nuxt.jsで詳細(show)と編集(edit)画面の動的ルーティングを設定する





詰まったこと


Nuxt.jsは、_idというファイル名もしくはディレクトリにすることで、

動的ルーティングを設定できます。


nuxtjs.org


今回、

study_roomsというリソースのCRUD画面を作成する際、

編集画面 (study_rooms/:id/edit) のルーティング生成で若干詰まったのでメモ。




解決策


  1. _idというディレクトリを切って、その下にedit.vueファイルを作成する

  2. _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.jsVue.jsTypeScriptはUdemyの下記コースで学習しました。


フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

Vue.js + Firebaseで作るシングルページアプリケーション

ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門


f:id:mah666hhh:20200815162919p:plain


f:id:mah666hhh:20200815162939p:plain


f:id:mah666hhh:20200815162951p:plain




最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★





あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech




最後までお読み頂きありがとうございました★

もしよかったらTwiiterのフォローもお願いします★