Nuxt.js 入門 (3) - プロジェクトによるWebアプリの作成

プロジェクトによるWebアプリの作成手順をまとめました。

・Nuxt.js 2.15.8

前回

1. プロジェクトによるWebアプリの作成

プロジェクトによるWebアプリの作成手順は、次のとおりです。

(1) 「Nuxt.js 入門 (2) - プロジェクトの作成」と同様にプロジェクトの作成を行う。

(2) 「pages/index.vue」を以下のように編集。
「index.vue」は、トップページにアクセスした時のページになります。

<!-- テンプレート -->
<template>
  <div>
    {{message}}
  </div>
</template>

<!-- スクリプト -->
<script>
export default {
  data: function() {
    return {
      message: 'Hello Nuxt!'
    }
  }
}
</script>

<!-- スタイル -->
<style>
</style>

(3) プロジェクトフォルダ(nuxt_app)に移動し、以下のコマンドでプロジェクトを実行。

$ yarn serve

​(4) ブラウザで「http://localhost:3000/」を開く。
以下の画面が表示されます。

2. ナビゲーション

ナビゲーションの例は、次のとおりです。

・pages/index.vue

<!-- テンプレート -->
<template>
  <div>
    <div>{{message}}</div>
    <RouterLink to="/next">次ページへ</RouterLink>
  </div>
</template>

<!-- スクリプト -->
<script>
export default {
  data: function() {
    return {
      message: 'Hello Nuxt!'
    }
  }
}
</script>

<!-- スタイル -->
<style>
</style>

・pages/next.vue

<!-- テンプレート -->
<template>
  <div>
    <div>{{message}}</div>
    <RouterLink to="/">トップページへ</RouterLink>
  </div>
</template>

<!-- スクリプト -->
<script>
export default {
  data: function() {
    return {
      message: 'Hello NextPage!'
    }
  }
}
</script>

<!-- スタイル -->
<style>
</style>

◎ ルートの自動生成
Webアプリで復数のページを表示するには、ルーターが必要になります。Vueアプリの場合、設定ファイル（例えば router.js）で、全てのルートを手動で設定する必要がありました。Nuxtアプリでは pagesディレクトリ内のVueファイルの位置を元にルートが自動生成されます。

◎ ナビゲーション
内部ページのリンクは<RouterLink>、外部ページのリンクは<a>を使います。

<router-link to=リンク>テキスト</router-link>
<a href=リンク>テキスト</a>

ルーティング

実行結果は、次のとおりです。

3. ルートパラメータ

ルートパラメータの例は、次のとおりです。

・pages/user/_id.vue

<!-- テンプレート -->
<template>
  <div>{{message}}</div>
</template>

<!-- スクリプト -->
<script>
export default {
  computed: {
    message: function() {
      let user_id = this.$route.params.id
      return "ユーザーID["+ user_id +"]のページです。"
    }
  }
}
</script>

<!-- スタイル -->
<style>
</style>

◎ ルートパラメータ
Nuxt.jsでは、ルートは自動生成されますが、「http://localhost:3000/user/0001」のようにパラメータ（今回は0001）を含んだルートを利用することができます。パラメータ部分のフォルダまたはテンプレートの先頭には「_」を付加します。

ルートパラメータには、以下の書式でアクセスします。

this.$route.params.パラメータ名

ファイルシステムに基づくルーティング

実行結果（「http://localhost:3000/user/0001」にアクセスした場合）は、次のとおりです。

次回