vue-router コンポーネントに関連する再利用の問題は何ですか?

この記事では主に vue-router コンポーネントの再利用の問題について詳しく説明しますので、参考として共有します。

コンポーネント システムは Vue の重要な部分であり、複雑なページ抽象化を多数の独立した再利用可能なコンポーネントに分解し、コンポーネントを組み合わせてアプリケーションを形成し、各コンポーネントを vue-router のルーティング機能と組み合わせることができます。コンポーネントは対応するルートにマッピングされ、ルートの変更を通じてコン​​ポーネントをレンダリングする場所が Vue に指示され、コンポーネントとページ間のジャンプ ナビゲーションが可能になります。

問題

vue-router を使用してルートを切り替えると、コンポーネント ツリーの更新がトリガーされ、定義されたルートに基づいて新しいコンポーネント ツリーがレンダリングされます。一般的な切り替えプロセスは次のとおりです。必要なコンポーネントを削除します

1. 切り替えの実現可能性を検証します

2. 更新されていないコンポーネントを再利用します

3. 新しいコンポーネントを有効にしてアクティブ化します

4. 具体的なルーティング切り替え制御プロセスについては、公式ドキュメントを参照してください: 制御パイプラインの切り替え

vue-router はコンポーネントが再利用できるかどうかをどのように判断しますか? 次のルーティング設定を見てみましょう:

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

これは、初めてアクセスされたときに、Post.vue コンポーネントがコンポーネント ツリーにレンダリングされます。コンポーネントは記事 ID を介してインストールされ、別の記事にアクセスすると、ルーティング パラメーター: postId が変更され、新しい記事のコンテンツが表示されるはずです。それは裏目に出ます。

表示されているのはまだ前の記事です。ルーティング パラメーターは変更されていますが、このコンポーネントは以前にレンダリングされているため、vue-router は前のコンポーネントを直接再利用します。また、マウントされたライフサイクル機能を含むコンポーネント内の操作は実行されません。

最終的に表示されるのは、元のコンポーネントのコンテンツです。

それでは、どうすれば望ましい効果を達成できるでしょうか?効果的な解決策を以下に紹介します

解決策

監視リスナーを使用してルーティングの変更を監視し、ルーティングパラメータの変更に基づいて対応するデータに応答できます。具体的な実装プロセスは次のとおりです:

データ取得を定義します。メソッド

まず記事を取得するメソッドを定義し、記事IDを元にバックグラウンドから該当する記事情報を取得します。

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

ルートをリッスンします

次のステップは、ルートが切り替わったときにターゲットコンポーネントがPost.vueコンポーネントであるかどうかを判断することです。そうであれば、これは定義されたルート名に基づいて実装できます。ルーティング情報から対象のアーティクルIDを取得し、コンポーネントの内容を更新します。

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

コンポーネントの初期化

なお、コンポーネントを初めてコンポーネントツリーにマウントする際には、ルーティングの監視は無効となりますので、ライフサイクル内でコンポーネントを初期化する必要があります。フックが取り付けられています:

mounted() {
  this.getPost(this.$route.params.postId);
}

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

JavaScriptでポリゴン重心を計算する方法

WeChatアプレットでスイッチセレクターを使用する方法

Angularエラー404問題の詳細な解釈

WeChatアプレットでのスライダーの使用方法コンポーネント

vueのCookieのパスワードを記憶する方法

AngularJSの重要なバージョンアップデート

WeChatアプレットで進行状況コンポーネントを使用する方法

以上がvue-router コンポーネントに関連する再利用の問題は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。