NuxtJSビギナーズガイド②基礎の実装

someone
9 9月, 2020

 ①Hello World

pages/index.vue

      <h1 class="title">

        Hello World

      </h1>

②プロジェクト構成

  • readme
  • assets
  • components
  • layouts
  • middleware
  • node_modules
  • nuxt.config.js
  • package.json
  • pages
  • plugins
  • static
  • store
  • yarn.lock
②ルーティングとページコンポーネントの作成
pages/users/index
pages/users/_id.vue
pages/users/register.vue
動的にルーティングを解決している。
/ > _id

動的ルーティングのコンテンツのだしわけ

<template>
    <div>
        <p>
            User ID: {{userId}}
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userId: this.$route.params.id
        }
    }
}
</script>

_以降の値(id)  はプロパティ名として認識して自動的にparamsへと代入される

axios-moduleによる外部リソースの取得

Next Post Previous Post
No Comment
Add Comment
comment url