ルーティングせずに Vue で URL パラメーターを取得する方法

フロントエンド テクノロジの継続的な開発により、Vue は最も人気のあるフロントエンド フレームワークの 1 つとして業界で広く使用されています。 Vue では、ルーティングを通じて URL パラメーターを取得することは一般的な要件であり、日常の開発で遭遇する一般的な問題でもあります。ただし、おそらく特殊なビジネス要件により、ルーティングを通じて URL パラメーターを取得したくない場合があります。この記事では、Vue がルーティングせずに URL パラメーターを取得する方法を紹介します。

まず、ルーティングが URL パラメータを取得する方法を理解しましょう。 Vue では、this.$route.query を通じて URL パラメーターを取得できます。たとえば、URL のパラメータが ?id=1 の場合、次の方法で取得できます:

this.$route.query.id  // 1

ただし、場合によっては、ルーティングを通じて URL パラメータを取得したくない場合もあります。複雑なビジネス ロジックや設計計画などに対応します。この場合、ウィンドウ オブジェクトを通じて URL パラメーターを取得できます。

次は、URL が http://localhost:8080?id=1 であると仮定した簡単な例です。

まず、ネイティブ JavaScript コードを使用して URL を取得する必要があります。コードは次のとおりです。

let url = window.location.search

上記のコードでは、window.location.search は、「?」や「=」などの特殊文字を含む URL パラメータを取得できます。

次に、URL 内のパラメーター値をインターセプトする必要があります。コードは次のとおりです。

let params = {}
if (url.indexOf('?') !== -1) {
    let arr = url.split('?')[1].split('&')
    arr.forEach((item) => {
        let val = item.split('=')
        params[val[0]] = val[1]
    })
}

上記のコードでは、まず if ステートメントを使用して、URL に「?」文字が含まれているかどうかを判断します。含まれている場合は、split メソッドを使用してパラメータ部分を分離し、loop メソッドと Split メソッドを使用して各キーと値のペアを分離します。最後に、パラメーター名とパラメーター値をキーと値のペアの形式でオブジェクトに保存します。

最後に、params オブジェクトを使用して URL パラメーター値を取得できます。たとえば、上記の URL の場合、次の方法でパラメータ値を取得できます。

params.id  // 1

要約すると、ルーティングを使用せずに、ウィンドウ オブジェクトを通じて URL パラメータを取得できます。もちろん、どのアプローチを使用するかは、特定のビジネス ニーズと設計オプションによって異なります。

つまり、Vue は非常に人気のあるフロントエンド フレームワークであり、Vue を学習する過程で、必然的に URL パラメーターを取得する必要が出てきます。この記事で紹介した 2 つの方法を通じて、ルーティングせずに URL パラメーターを取得するスキルを習得し、複雑なビジネス ニーズにうまく対処できるようになります。

以上がルーティングせずに Vue で URL パラメーターを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。