vue-router を遅延ロードするときにロード プロンプトを追加して、ユーザー エクスペリエンスを向上させます

今回は、vue-router が遅延読み込みしているときにユーザー エクスペリエンスを向上させるために読み込みプロンプトを追加する方法を紹介します。見てみましょう。 vue-router を使用したことのある人なら誰でも、vue-router がモジュール js の遅延読み込みを実装できることを知っています。つまり、ホームページの表示を高速化するために、必要なときに対応するモジュールの js スクリプト ファイルのみを読み込みます。たとえば、ユーザーが初めて「ユーザー情報」ボタンまたはメニューをクリックしたときのみ、「ユーザー情報」モジュールの js コンポーネントがダウンロードされます。

遅延読み込みの実装は、webpack の AMD モードの関数

function に依存します。 Webpack は、非同期の require ファイルから独立した js ファイルを生成します。呼び出し時には、js が非同期的にダウンロードされ、完了後に実行されます。開発プロジェクトに実装されているキーコードは次のとおりです:

const basicInfo = {
  path: '/user',
  component: resolve => require(['./basicInfo.vue'], resolve) 
}
//然后将这个basicInfo加入路由表中

が完了するまで、ダウンロードの時間遅延により、この期間中、ネットワークからの js ユーザー インターフェイスが応答しないため、ユーザーはクリックしても効果がないと感じ、頻繁に再度クリックしてしまいます。これは、js ファイルが大きく、ネットワーク速度が遅い場合に特に当てはまります。したがって、このプロセスに Loading 読み込みプロンプトを追加する必要があります。 次のコード行を分析します:

resolve => require(['./basicInfo.vue'], resolve)

これはrequire処理を実行し、完了後にresolve

を呼び出す関数です。これをカプセル化し、require が実行される前に Loading を表示し、ロードが完了してコールバックが実行されたときに Loading を非表示にするだけで、この要件は達成されます。次のように:

const basicInfo = {
  path: '/user',
  component: resolve => {
    [显示Loading]
    require(['./basicInfo.vue'], component => {
      [隐藏Loading]
      resolve(component)
    })
  }
};

import { Loading } from 'element-ui';
var unique;
export default {
  show() {
    let opt = {body: true, text: 'Loading...'};
    if(!unique) unique = Loading.service(opt);
  },
  resolve(resolve) {
    return function (component) {
      if (unique) {
        unique.close();
        unique = null;
      }
      resolve(component)
    }
  }
}
const basicInfo = {
  path: '/user',
  component: resolve => {
    spinRoute.show();
    require(['./basicInfo.vue'], spinRoute.resolve(resolve))
  }
};

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

以上がvue-router を遅延ロードするときにロード プロンプトを追加して、ユーザー エクスペリエンスを向上させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。