【Vue】URLスプライシングパラメータの取得と解析

序文:
多くの場合、フロントエンドは、独自の使用またはサードパーティ システム用にパラメータなしのリンク、またはパラメータ付きのリンクを提供する必要があります。サードパーティ システム用に提供されている場合、サード パーティは iframe/window.open/a タグを介してリンクを開いて、対応するページに入る必要があります。
ケース 1: 現在のブラウザのアドレス バーにあるリンクを取得します。
1. location.href: 現在のブラウザのアドレス バーにあるリンクを取得します。
ここに画像の説明を挿入
2. 新しい URL(location.href): 現在のブラウザのアドレス バーにあるリンクを解析します。searchParams から値を取得するための search に値があります。
ここに画像の説明を挿入
3.new URL(location.href).searchParams.get('articleId'): ブラウザのアドレスバーのアドレスの後に接続されたパラメータを取得します ケース 2: 指定された URL を解析します 例 ** : ** http://localhost:8080/index?param=123 1.new URL('http://localhost:8080/index?param=123'): 指定されたリンクを解析します 2.new URL('http://localhost :8080/ind ex?param=123').searchParams.get('param'): 指定されたリンク内
ここに画像の説明を挿入

パラメータ
取得

ここに画像の説明を挿入
ます
ここに画像の説明を挿入

URL の全体的な分析:
1. # のないURL
http://localhost:8080/index?param=123' は、
リンク内のパラメーターを直接取得できます。
2. # を含む URL
http://localhost:8080/#/index?param=123' は、
リンク内のパラメーターを取得できません。
理由 1: このとき、リンク内の # はラベル内の識別子とみなされます。つまり、アンカー ポイントもリダイレクトです。リダイレクトのため、アクセスできません。理由 2: # 記号の付いたリンクはサーバーに送信されず、ブラウザはリンクによって運ばれるパラメータを解析しません。解決策: パラメータを前に置き
ます
http://localhost:8080?param=123#/index

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_42342065/article/details/127868983