最近、プロジェクトでこのような問題が発生しました。私たちのシステムでは、プロジェクトのコンセプトがあり、ユーザーは複数のプロジェクトを作成することができ、各プロジェクトには複数の環境があり、ユーザーがプロジェクト名をクリックすると、プロジェクトの内部ページに入り、左側のメニューバーに環境を切り替える機能があります。各環境には、記事、ユーザー、ロール、パイプラインなど、多くのリソースがあります。
次に、プロジェクトの環境を切り替えた後、現在のページに滞在し、現在の環境で記事、ユーザー、ロールなどのデータを取得します。ルートは大体こんな感じです。 /p/pid/e/eid/job pidはプロジェクトID、eidは環境IDです。変更後は、現在のURLのみが変更されます。eidパラメータ。
私の最初の設計は、環境を切り替えるときにルート内のeIDを更新し、リフレッシュする必要があるすべてのページを監視することでした。 route.params.eidページのデータを再ロードまたは初期化します。このスキームの利点と欠点があります。利点は、各ページは環境を切り替えた後に別々のページロジック処理を行うことができ、共通データ、すなわち環境に依存しないインターフェイスデータは、再ロードする必要はありません。欠点は、特に現在のページに中間変数が多い場合、作業負荷が大きくなることです。
私の同僚の提案では、環境を切り替えるときに空のページにジャンプして、そのページからリダイレクトすることができます。現在のページを再読み込みする必要があります変更はほとんどありませんが、中間リダイレクトコンポーネントの追加により、ホワイトスクリーン、ルーティングの混乱、冗長コンポーネントの追加など、多くの予期せぬ事態が発生します。このプログラムはとても低いと思いますそれ以上の計画がなかったので、最初にこの計画を選びました。比較作業は少なく、他のことを研究する時間があります。
そこで私はよりエレガントなプログラムを見つけました。eディレクトリ内で作成eidカタログとeid.vue。eid.vueには、eidディレクトリ内の特定のコンテンツをレンダリングするためのrouterviewコンポーネントが1つだけあります。最も重要なのは、ルートビューコンポーネントで設定することです。 :key="route.params.eid"キーが異なるため、vueは2つの異なるノードを再レンダリングします。
このように，ルーティング中のeidが変更されると，routerviewが再レンダリングされ，下位の文章，ユーザコンポーネントが再レンダリングされる.これは私が今まで見つけた最もエレガントなプログラムです。
发表回复