Vueは新しいウィンドウを開き、パラメータ転送のグラフィック例を実装します。

私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要があり、パラメータをアドレスバーに表示することはできません。さらに、ページを更新しても、渡されたパラメータは失われず、新しいウィンドウ、つまりブラウザタブを手動で閉じない限り、常に存在する必要があります。

Baidu のプログラミングを通じて、オンラインコンテンツではこの効果はまったく得られず、落とし穴があることが分かりました。明らかに実現不可能ですが、あたかも事実であるかのように書かれています。そのため、タイトルに「画像があり、真実がある」とわざと付け加えました。私はあなたを騙しているわけではありません。その機能を実現できないのであれば、人を騙すために出てこないでください。

まずは私が作成したコードを書き出し、その後、他の人が実装できない落とし穴や、この点で注意する必要がある点を紹介します。

新しいウィンドウを開いてコードを渡す

//新しいウィンドウを開いてパラメータを渡します。パラメータはアドレスバーに表示できません。ウィンドウが閉じられていない場合は継続的に更新されます。パラメータは常に有効です。handleWindow() {
 //主に新しいウィンドウを開く機能を実現する var route = this.$router.resolve({
 名前: 'Xterm',
 })
 //主にパラメータを保存する機能を実装します sessionStorage.setItem("ip", "1.1.1.1");
 
 window.open(route.href, '_blank')
}

私のルーティング構成も掲載されています。

{
 パス: '/xterm',
 非表示: true、
 コンポーネント: () => import('@/views/monitor/xterm/index'),
 名前: 'Xterm',
},

これでページはパラメータを受け取ります

//Vue 初期化メソッド。ページが初期化されたら、パラメータ created() を取得します。{
 アラート(sessionStorage.getItem("ip"));
 this.ip = sessionStorage.getItem("ip")
},

真実の写真を投稿する

これは、vue を通じて新しいウィンドウを開き、sessionStorage を通じてパラメータを渡すことによって行われます。なぜこの機能を実現するにはこの方法しか使えないのでしょうか? 落とし穴に足を踏み入れた私の体験をお話ししましょう。インターネット上で偽のコードを使って人を騙す悪人もいます。そのようなテストに耐えられないプログラマーはいるでしょうか?

まず、この機能は新しいウィンドウを開く必要があるため、それを実行するには 3 つの方法があります。

最初の方法: <router-link>タグを使用する。個人的には、このタグの書き方は好きではありません。単純なビジネスシナリオではかろうじて問題ありませんが、多くのビジネスと多くのパラメーターを処理する必要があります。このタグの書き方は、ビジネスの拡大には役立ちません。直接排除、OUT!

2 番目の方法: router.replaceメソッドを使用する。このメソッドはウィンドウを開き、現在の A ページをジャンプ先の B ページに置き換えます。新しいウィンドウを開いて新しいものを表示すると、前のページがすぐに消えてしまいます。これはおかしくありませんか?実験後、OUT!

3 番目の方法: router.resolveメソッドを使用して、現在の A ページに影響を与えずに新しいウィンドウを開き、ブラウザタブを直接開きます。タブを切り替えて、2 つのページの情報データを表示できます。これはいいですね、気に入りました、これです。

ちなみに、vue2.0以降、普及が進むHTML5との整合性を保つため、router.goとrouter.pushは新しいウィンドウを開く属性をサポートしなくなりました。router.goは進むと戻るとして使用され、router.pushは特定のページへのガイドとして使用されます。このジャンプでは新しいウィンドウは開きませんが、履歴機能があります。1つのウィンドウに複数のタブがある場合は、図に示すようにこれを使用して複数のタブを開くことができます。

さて、router.resolve を使用すると、新しいウィンドウにジャンプできるので、パラメータを渡し始めますが、ここが難しいところです。オンライン転送によると、パラメータ転送には主に 2 つの種類があります。

//最初のパラメータをテストする testA (aaa) {
 const ルート = this.$router.resolve({
   名前: 'Xterm', 
   パラメータ: {
     ip:aaa
   }
 })
 window.open(route.href,'_blank')
}

//2番目のパラメータをテストする testA (bbb) {
 const ルート = this.$router.resolve({
   パス: '/xterm', 
   クエリ: {
     IP: bbb
   }
 })
 window.open(route.href,'_blank')
}

対応する受信パラメータは次のとおりです。

作成された() {
 //最初のアクセスパラメータをテストします this.ip = this.$route.params.ip
 // 2 番目のアクセス パラメータをテストします this.ip = this.$route.query.ip
},

テストの結果、最初のタイプでは値を取得できないのに対し、2 番目のタイプでは渡されたパラメータの値がアドレスバーに公開されます。最初の方法では、あらゆる種類の特別な処理を実行しても、最良の結果は最初の値のみを取得することです。ページを再度更新すると、値は失われます。なぜこのようなことが起こるのでしょうか?ユーザーが行き詰まりを感じて更新ボタンをクリックしないことを誰が保証できるでしょうか? router.pushでパラメータを渡すことに全く問題はありません。すべてのパラメータを受け取ることができます。違いは、name+params の組み合わせの場合、パラメータはアドレスバーに表示されず、更新後にデータが消えてしまうことです。path+query の組み合わせの場合、パラメータはアドレスバーに表示され、ページをどのように更新しても値はそこに残ります。プッシュで試してみたら、解決方法も同じだろうと自然に思ったのでしょう。アドレスバーでパラメータを渡さずに最初の方法を使うと絶対に成功しないというブログをたくさん見てきましたが、クリック数は依然として非常に多く、泣きたいのに涙が出ません。

自分でやるしかありませんでした。キャッシュを探して、localStorage と sessionStorage プロパティを見つけました。SessionStorage はデータを一時的に保存するために使用され、ウィンドウまたはタブを閉じると削除されます。localStorage は、Web サイト全体のデータを永続的に保存するために使用されます。保存されたデータには、手動で削除されるまで有効期限はありません。明らかに、sessionStorage で十分です。

これら 2 つの属性をサポートするブラウザのバージョンは次のとおりです。

この時点で、問題は実際に解決しました。実際、複雑ではありません。インターネット上の回答の質がまちまちなだけです。他の人が使用できるように記録しておきます。

要約する

これで、Vue で新しいウィンドウを開いてパラメータを渡す方法についての記事は終了です。Vue で新しいウィンドウを開いてパラメータを渡す方法についての関連記事は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: