【ゼロから学ぶNuxt3×Typescript】⑥$route変数を使いidの中身を取得

Nuxt３×TypeScript 学習
下記の参考サイトを見ながら、Nuxt３とTypescriptを学ぶ第6回。

▼　神回|vue3.js nuxt3 typescriptどうやる？【ゼロから解説】

前回はこちら👇

第1回はこちら👇

前回は
・[id].vueに求人情報を入れる<ul>を作り、:class属性（クラスバインディング）を使用して取得したidによって付与するclassを制御する
・リアクティブなjobsという変数を作成し、初期値の求人情報の配列を代入する（求人情報が変わるとUIも変わる）
というところまでやりました。

1.[id].vueのidを取得する

nuxtが用意している$routeという変数を使いidの中身を取得していきます。
{{$route.params.id}}という形で取得することができます

$routeとは

現在のURLパス、クエリパラメータ、ハッシュフラグメント、およびその他のルートに関連する情報が含まれているオブジェクト
これにより、動的なルーティングやナビゲーションに関連する情報にアクセスできる。

たとえば、 http://localhost:3000/jobs/hoge?q=00 とした時
[id].vueに下記を書いてみる。

・[id].vue

<template>
  <h2>$route</h2>
  <p>{{ $route.fullPath }}</p><!-- クエリパラメータやハッシュを含む -->
  <p>{{ $route.name }}</p><!-- indexやaboutのようなルートの名前 -->
  <p>{{ $route.path }}</p> <!-- ルートのパス（クエリパラメータは含まれるがハッシュは含まない） -->
  <p>{{ $route.params }}</p> <!-- 動的なパスパラメータのオブジェクト -->
  <p>{{ $route.params.id }}</p><!-- 動的なパスパラメータから id という名前のパラメータの値を取得 -->

<!-- 以下略 -->
</template>

UIではこのように表示される。

今回は[id].vueのidを取得したいので、{{ $route.params.id }}で取得できるということ。

ここまで理解できた。
取得の前にJOB INDEXを作る。

2.jobs/index.vueを編集

お手本サイトでは<h1>求人一覧</h1>となっているが、ルートのindex.vueで<h1>を使っており重複するので<h2>にする。
（勉強には関係ない部分だが、自分は文書構造重視タイプなので。about.vueも直しておこうかな。）

・jobs/index.vue

<template>
  <h2>求人一覧</h2>
  <ul>
    <li v-for="job in jobs" :key="job.id">
      <p>求人ID: {{ job.id }}</p>
      <p>求人タイトル: {{ job.title }}</p> <!-- name? -->
      <p>求人内容: {{ job.description }}</p>
      <p>画像：<img :src="job.cover" alt=""></p>
    </li>
  </ul>
</template>

<script lang="ts">
import { ref,reactive} from 'vue'

export default {
  // awaitを使う時は関数の先頭にasyncをつける
  async setup() {
    // ref関数でjobs変数を作成
    const jobs = ref([])
    // await 非同期処理
    // fetch ブラウザのAPIで、HTTPリクエストを発行してデータを取得する
    // APIの中のdataというキーを変数に入れている
    const { data } = await useFetch(`https://62fe320941165d66bfbabe7e.mockapi.io/apt/v1/jobs`)
    jobs.value = data._rawValue
    console.log(data._rawValue);
    // const { data: jobs } = await useFetch(`https://62fe320941165d66bfbabe7e.mockapi.io/apt/v1/jobs`)
    return {
      jobs,
    }
  }
}
</script>

このままではもろもろエラーになっていて使えない＆ひとつひとつ調べないと理解できていないので次回じっくり学習します。

今回はここまで！

折を見てvueでコンタクトフォーム的な物を作成する。
メリークリスマスですね🎄寝ます。

参考サイト

不明点はGPTに聞いて単語の意味を知り、関連ワードをゲット→関連ワード含めて検索→ソースを探す、というふうにやっています。
間違えていたら教えてください。