Vue プロジェクトは HTML にジャンプするときに情報を伝えることができますか?

Vue プロジェクトでは、HTML ページへのジャンプなど、他のページにジャンプする必要があることがよくあります。ジャンプするときに、ターゲットページで関連する操作を取得して実行できるように、ユーザー ID や製品 ID などの情報を保持する必要がある場合があります。そこで問題は、Vue プロジェクトが HTML ページにジャンプするときに情報を伝えることができるかということです。この記事では、例を通じてこの問題を検討します。

Vue プロジェクトの HTML ページにジャンプするには、通常 2 つの方法があります。1 つは Vue Router を介してジャンプする方法、もう 1 つはタグを介してジャンプする方法です。次に、これら 2 つの方法を詳細に分析します。

Vue Router によるジャンプ

Vue Router は、Vue.js の公式ルーティング マネージャーであり、Vue プロジェクトにジャンプ機能を迅速かつ簡単に実装できます。 Vue プロジェクトでは、Vue Router を使用して HTML ページにジャンプし、同時に情報を伝えることができます。

コード例

ユーザー リスト ページ UserList.vue を定義する Vue プロジェクトがあるとします。ユーザー リスト ページの HTML ページにジャンプし、現在のユーザー ID を伝える必要があります。 。これは、次のコードを通じて実現できます。

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">
        <router-link
          :to="{
            path: '/info.html',
            query: { userId: user.id }
          }"
        >
          {{ user.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: 'Tom' },
        { id: 2, name: 'Jerry' },
        { id: 3, name: 'Mike' }
      ]
    }
  }
}
</script>

この例では、Vue Router によって提供される router-link コンポーネントを使用してジャンプ関数を実装します。 to 属性では、パス パラメーターを使用してジャンプ先の HTML ページへのパスを指定し、クエリ パラメーターを使用して現在のユーザーの ID を保持します。

HTML ページでは、JavaScript の window.location.search を通じてクエリ パラメーターを取得し、現在のユーザーの ID を取得できます。たとえば、info.html ページで次のコードを使用して、現在のユーザーの ID を取得できます。

const searchParams = new URLSearchParams(window.location.search)
const userId = searchParams.get('userId')

結果分析

上記のコード例を通じて、Vue でジャンプしていることがわかります。ルーター情報は、HTML ページに移動するときに送信できます。ジャンプ時にクエリ パラメーターを使用して情報を伝達し、ターゲット ページの JavaScript を通じてこの情報を取得できます。

タグを介してジャンプ

Vue Router を使用してジャンプすることに加えて、HTML の a タグを使用してジャンプ機能を実装することもできます。 Vue Router とは異なり、ラベル ジャンプにはルーティング設定が必要なく、よりシンプルかつ高速に実行できます。ただし、情報を伝達するという点では、他の方法を使用してタグを実装する必要があります。

コード例

Vue プロジェクトの HTML ページ info.html にジャンプし、現在のユーザーの ID を保持する必要があるとします。これは、次のコードで実現できます。

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">
        <a :href="`/info.html?userId=${user.id}`" target="_blank">
          {{ user.name }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: 'Tom' },
        { id: 2, name: 'Jerry' },
        { id: 3, name: 'Mike' }
      ]
    }
  }
}
</script>

この例では、a タグを使用してジャンプ関数を実装します。 href 属性では、テンプレート文字列を使用してジャンプ リンクをつなぎ、クエリ パラメータを使用して現在のユーザーの ID を保持します。 target 属性に _blank を設定して、ブラウザがターゲット ページを新しいタブで開くようにします。

HTML ページでは、JavaScript の window.location.search を使用してクエリ パラメータを取得し、現在のユーザーの ID を取得することもできます。

結果分析

上記のコード例を通じて、ラベル ジャンプには Vue Router の使用は必要ありませんが、情報を伝達するには他のメソッドを使用する必要があることがわかります。クエリ パラメーターを使用して情報を伝達し、ターゲット ページの JavaScript を通じてこの情報を取得できます。

概要

上記の分析を通じて、Vue プロジェクトは HTML ページにジャンプするときに情報を伝えることができると結論付けることができます。 Vue Router またはタグを使用してジャンプ関数を実装し、クエリ パラメーターを通じて情報を伝達できます。ターゲット ページでは、JavaScript を通じてこの情報を取得して操作できます。特定の開発では、実際のニーズに応じてジャンプや情報伝達を実装するためのさまざまな方法を選択する必要があります。

以上がVue プロジェクトは HTML にジャンプするときに情報を伝えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。