この記事の例では、ページキャッシュ機能を実装するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 キープアライブは主にリスト ページから詳細ページにジャンプするために使用され、その後「戻る」をクリックしたときに、ページ キャッシュがリソースを再度要求する必要がなくなります。 1. ルーターでルーティングを設定する メタでページをキャッシュする必要があるかどうかを定義する 「vue」からVueをインポートします。 「vue-router」から Router をインポートします。 // 現在の場所への冗長なナビゲーションを避ける const originalPush = Router.prototype.push Router.prototype.push = 関数push(location) { 元のPush.call(this, location).catch(err => err) を返します } Vue.use(ルーター); デフォルトの新しいルーターをエクスポートします({ ベース: ''、 ルート: [{ パス: "/"、 名前: "インデックス", コンポーネント: () => import("@/layout"), リダイレクト: '/login', 子供たち: [ { パス: 'dutySheet', 名前: 'dutySheet', コンポーネント: () => import("@/pages/Dashboard/DutySheet") }, { パス: 'searchWord', 名前: '検索ワード', コンポーネント: () => import("@/pages/dailyReportManage/searchWord/index"), メタ: { keepAlive: true // ページをキャッシュする必要があります} }, // マッチングメンテナンス{ パス: "troopAction", 名前: "troopAction", コンポーネント: () => import("@/pages/Dashboard/TroopAction"), メタ: { keepAlive: false // キャッシュは不要} }, ] }, ] }); 2. APP.vueを設定する キャッシュにキープアライブを使用する <キープアライブ> <ルータービュー v-if="$route.meta.keepAlive"></ルータービュー> </キープアライブ> <ルータービュー v-if="!$route.meta.keepAlive"></ルータービュー> 3. 戻るボタンをクリックしたら、this.$router.back() メソッドを呼び出します。 // 戻り値 backKBnt(){ this.$router.back() }, 4. キャッシュをクリアする 「exhibitionWord」または「exhibitionWeekWord」ページへのジャンプのみがキャッシュされ、他のページへのジャンプはキャッシュする必要はありません。 beforeRouteLeave(to, from, next) { if (to.name == 'exhibitionWord' || to.name == 'exhibitionWeekWord') { // キャッシュされるルート名 from.meta.keepAlive = true 次() }それ以外{ from.meta.keepAlive = false 次() } }, 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VirtualBoxにOpenSuseをインストールする方法
必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末...
1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...
序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...
この記事では、参考のために、WeChatアプレットのチャットルームを実装するための具体的なコードを例...
序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...
序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...
目次1 nginxの紹介1 nginxとは何か2 つのアプリケーション シナリオ2 nginxのイン...
序文前回の記事「MySQL ロック メカニズムの詳細説明」では、InnoDB のロック メカニズムに...
文章さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでな...
ブラウザによって動作が異なるだけでなく、フォントやテキスト サイズによっても動作が異なります。フォー...
HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...
前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...
Ubuntu Server 16.04 MySQL 8.0 のインストールと設定のグラフィックチュー...
序文皆さんはリモート サーバーで開発を行っており、MySQL の使用率はかなり高いはずです。コマンド...
目次1. 特徴2. 例3. オプション4. 基本的な文法5. ライフサイクル6. ルーティング管理 ...