vueはパラメータを使用してhtmlにジャンプします

Vue アプリケーションでは、異なる HTML ページ間を移動する必要があることがよくあります。ビジネス ニーズを満たすために、ジャンプ用のパラメータを運ぶ必要がある場合があります。この記事では、Vue アプリケーションでパラメーターを使用して HTML ページにジャンプする方法を紹介します。

1. Vue Router を使用する

Vue Router は Vue.js の公式ルーティング マネージャーであり、SPA アプリケーションのルーティング ジャンプを簡単に実装できます。 Vue アプリケーションで Vue Router を使用すると、パラメーターを使用して HTML ページ ジャンプを簡単に実装できます。

1. Vue Router のインストール

Vue Router を使用する前に、まず Vue Router をインストールする必要があります。 Vue Router は npm 経由でインストールできます。具体的なコマンドは次のとおりです:

npm install vue-router --save

インストールが完了したら、次のように Vue Router を Vue プロジェクトに導入します:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

2. Configure routing

ルート ジャンプに Vue Router を使用する前に、最初にルーティングを設定する必要があります。 Vue Router でのルーティングの設定は非常に簡単です。Vue インスタンスでルート配列を定義するだけです。各要素はルーティング設定を表します。例:

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

const router = new Router({
  routes,
  mode: 'history'
})

export default router

上記のコードは 2 つのルーティング構成を定義します。最初のルートの対応するパスは「/home」、コンポーネントは Home です。2 番目のルートの対応するパスは「/detail/:id」です。「id」は動的パラメータ、コンポーネントは Detail です。

3. ルート ジャンプの実行

Vue Router でルート ジャンプを実行するのは非常に簡単です。 router-link コンポーネントを使用してジャンプするか、または router.push メソッドを使用してプログラムで移動するだけです。

• router-link を使用してジャンプする

Vue コンポーネントのテンプレートで router-link コンポーネントを使用すると、ルーティング ジャンプを簡単に行うことができます。例:

<router-link :to="{name: 'detail', params: {id: 123}}">Show Detail</router-link>

上記のコードでは、router-link コンポーネントを使用して「detail」という名前のルートにジャンプし、値 123 のパラメータ「id」を渡します。

• router.push メソッドを使用してジャンプ

Vue コンポーネントで router.push メソッドを使用すると、プログラムによるナビゲーションを実装できます。例:

this.$router.push({name: 'detail', params: {id: 123}})

上記のコードでは、router.push メソッドを使用して「detail」という名前のルートにジャンプし、値 123 のパラメータ「id」を渡します。

2. location.href を使用する

ルート ジャンプに Vue Router を使用することに加えて、ジャンプにネイティブ location.href を使用することもできます。 location.href を介したルート ジャンプを実装する場合、URL を手動で結合し、パラメーターをエンコードする必要があります。

1. location.href を使用してジャンプする

location.href を使用してジャンプするのは非常に簡単です。たとえば、「detail」という名前の HTML ページにジャンプし、値 123 のパラメータ「id」を渡したいとします。これは次のようになります。

location.href = '/detail.html?id=' + encodeURIComponent('123')

上記のコードでは、encodeURIComponent メソッドは次のようになります。パラメータをエンコードするために使用されます。これは、リダイレクト URL の形式が不正になる特殊文字を含むパラメーターを避けるために行われます。

2. HTML ページでのパラメータの取得

パラメータを含む HTML ページにジャンプした後、後で使用するために URL からパラメータを取得する必要があります。 JavaScript では、location.search を通じて URL のパラメータ部分を取得できます。たとえば、「detail」という名前の HTML ページにジャンプし、パラメータ「id」の値が 123 であるとします。次のコードを通じてパラメータを取得できます。

function getUrlParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  const r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURIComponent(r[2])
  }
  return null
}

const id = getUrlParam('id')
console.log(id) // 输出123

上記のコードでは、RegExp とmatch はパラメータ付き URL のパラメータ部分を取得するメソッドを使用します。 decodeURIComponent メソッドを使用してパラメータをデコードし、パラメータに含まれる特殊文字によって引き起こされる解析エラーを回避します。

要約すると、ルーティング ジャンプには Vue Router を使用することをお勧めします。ルーティングをより適切に管理し、より高速にジャンプでき、Vue の MVVM のアイデアにより沿っています。もちろん、ルーティング ジャンプにネイティブ location.href を使用することもできますが、パラメータのエンコードとデコードに注意する必要があります。実際の開発では、実情に応じて適切な手法を選択する必要があります。

以上がvueはパラメータを使用してhtmlにジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。