Nuxtにおける動的ルーティング

こんにちは👋

本稿では、Nuxtのダイナミックルーティングについて話します.
動的ルーティングにより、ルート変更を条件としてレイアウトやページを完全に変更せずにコンポーネントをレンダリングできます.
動的ルーティングは、Vueコンポーネントを条件的にレンダリングできます.
Vueは開発者にWebアプリケーションの基本的なビルディングブロックとしてコンポーネントを使用するよう奨励します.これにより、同じページに別々のコンポーネントをレンダリングすることができます.
例えば、ユーザーのテーブルリストを表示し、特定のユーザーがテーブルリストから選択されたときに、ユーザーの詳細にページを開く必要条件を仮定します.
動的ルーティングを使用すると、2ページコンポーネントを使用してこれを実現できます.

まず、ルートを使用します/users として保存されるusers.vue ページの読み込み時にユーザーのテーブル一覧を読み込む.次に、ルートを使用して動的なページを使用します/users/:userId として保存される_users.vue フォルダの内部users ユーザーの詳細を読み込む

表リストのロールがクリックされたときのユーザー詳細のイメージ

始める

すぐに上記のイメージを実装する方法を行きましょう.
まず第一に、我々はダイナミックなページについて学ばなければなりません.
動的なページを作成することができますときには、ページの名前を知っていないAPIから来るか、または同じページを何度も繰り返し作成する必要はありません.動的ページを作成するには、アンダースコアを前に追加する必要があります.vueファイル名.ファイルやディレクトリに名前を付けることができますが、アンダースコアを付けてください.など_dynamicpage.vue .
それで、我々のファイルのために、我々は名前をつけられたフォルダをつくるでしょうusers その後、名前とフォルダ内のそれを保存_users.vue次に、HTMLコンポーネントを作成します_users.vue

<template>
  <div class="content">
      <div class="row-1">
        <div>
          <h6>User ID</h6>
          <p>{{users._id}}</p>
        </div>
        <div>
          <h6>Name</h6>
          <p>{{users.name}}</p>
        </div>
        <div>
          <h6>Age</h6>
          <p>{{users.age}}</p>
        </div>
      </div>
      <div class="row-2">
        <div>
          <h6>Phone Number</h6>
          <p>{{users.number}}</p>
        </div>
        <div>
          <h6>Course</h6>
          <p>{{users.course}}</p>
        </div>
        <div>
          <h6>Gender</h6>
          <p>{{users.gender}}</p>
        </div>
      </div>
      <div class="row-3">
        <div>
          <h6>Email Address</h6>
          <p>{{users.email}}</p>
        </div>
        <div>
          <h6>Origin State</h6>
          <p>{{users.state}}</p>
        </div>
        <div>
          <h6>Reg Date</h6>
          <p>{{users.date}}</p>
        </div>
      </div>
  </div>
</template>

メイン部分には、スクリプトのセクション
APIからユーザのデータを取得するので、APIリクエストを呼び出します.(異なるメソッドを使ってAPIからデータを取得する方法についての記事を書きます.)

<script>
export default {
  data() {
    return {
      users: {}
    }
  },
  created () {
    this.getUsersById()
  },
  methods: {
    async getUsersById () {
      const userIdPromise = await fetch(`https://sample.api.com/users/id/${this.$route.params.users}`)
      const userIdJson = userIdPromise.json()
      userIdJson.then((res) => {
        this.users = res.data
      })
    }
  }
}
</script>

我々のAPIの要求を呼び出しながら、我々は${this.$route.params.user} APIリンクの後ろに.
これは何ですか.
我々は${this.$route.params.user} ローカルページ内の現在のルートパラメーターにアクセスします.
たとえば、動的な学生ページ(学生/RenMatCount . vue )を持っている場合、MATICONSTRパラメータにアクセスして学生やプロセスの情報を読み込む場合、以下のような変数にアクセスできます:this.$route.params.matricnumber .
我々のダイナミックなページがそうであるので/users.vue .

<template>
  <div>
    <table>
      <tr class="table-head">
        <th class="sn td-th">User ID</th>
        <th class="td-th">Name</th>
        <th class="td-th">Reg Date</th>
        <th class="td-th">Email Address</th>
        <th class="td-th">Course</th>
        <th class="td-th">Action</th>
      </tr>
      <tr 
      v-for="users in userTable" 
      :key="users._id" class="table-body" 
      @click="$router.push(`/user/${users._id}`)">
        <td class="sn td-th">{{ users._id }}</td>
        <td class="td-th">{{ users.name }}</td>
        <td class="td-th">{{ users.date }}</td>
        <td class="td-th">{{ users.email }}</td>
        <td class="td-th">{{ users.course }}</td>
      </tr>
    </table>
  </div>
</template>

どうしましたか.
私たちはオンクリック機能を追加@click クリックしたときに動的なページに移動し、特定のユーザーIDのURLを与える必要があります/user/${users._id}では、APIからテーブルデータを取得します

<script>
export default {
  data() {
    return {
      userTable: []
    }
  },
  created () {
    this.getUsers()
  },
  methods: {
    async getUsers() {
      const promise = await fetch('https://sample.api.com/users')
      const usersJson = promise.json()
      usersJson.then((res) => {
       this.userTable = res.data
      })
    }
  }
}
</script>

概要

この記事では、Vue $ routeオブジェクトを使用して、ページ間で一般的に動的IDまたは文字列を転送する方法を説明しました.以前に述べたように、APIがエンティティのIDを必要とするときにバックエンドからデータを取り出すのは特に便利です.
私に何かを尋ねるために従事し、下記のコメントをお気軽に!私は常に話をし、助けてうれしいです.
読んでくれてありがとう!

有用資源

The Route Object