未経験から優秀エンジニアを目指す24歳の成長ストーリー(14)

こんばんは。おはようございます。
最近生活リズムが崩れてきた気がしてます。。

本日はnuxt.jsの学習を行いました。
最近一気になんでもできるようになろうと必死になっており、
結果的になんにも身になってないと痛感したので、
小さなできたことを見つけていこうに切り替えました。
なので今日もできたこと集です。

• 一度エラーになった時の解決ができた。
  初歩的なミスであったが、もう一度一からやりなおすのではなく、
  エラー文を翻訳し、なにを意味しているのか理解する癖がついた。
  内容はdataがdateだった笑

• ページ遷移の理解ができた。
  pagesの中にindex.vueとprice.vueがあった場合
  ローカルでは、
  index.vue→localhost:3000/
  price.vue→localhost:3000/price
  それをコード内にページ遷移したい場合
  index.vueの中に

<router-link to = "/price"> price pages </router-link>

    price.vueの場合

<router-link to = "/"> Top pages </router-link>

• 動的なルーティングの際は

<template>
<section>
<h1>{{ message }}</h1>
<p>id: {{ this.$route.params.id }}</p>
</section>
</template>

<script>
export default {
data:function(){
return {
message:'/users/-id.vueを表示'
}
}
}
</script>
仮にusersの中のindex.vueで書いた場合が上
http://localhost:3000/users/onでリロードした場合
/users/-id.vueを表示
id: on
と表示。
http://localhost:3000/users/offにした場合
/users/-id.vueを表示
id: off
to
と表示。

http://localhost:3000/users/offや
http://localhost:3000/users/onでも
なんの言葉でも反映されているが、これを数値のみの
反映にしたい場合、scriptの中に

validate({ params }) {return /^\d+$/.test(params.id)}

を書いてあげると数値のみの反映になる。
/^\d+$/
が数値反映のコード。

ただ、this.$route.params.idの意味が理解できなかった。

明日も頑張ります。