この記事の例では、ページキャッシュ機能を実装するための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.dockerをオンラインでダウンロードする yum インストール -y epel-release...
目次1. 機能紹介2. キーコード2.1 ホームページの機能2.2 製品情報を追加する2.3 データ...
プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...
この記事では、divマウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考まで...
目次概要1. 親コンポーネントが子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに...
目次1. 透かしのJsファイルを作成する2. 導入操作2.1 App.vueや他のページでの参照2....
問題の説明CSS を使用して上部の固定効果を実現したいと思います。 margin-top と pos...
MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....
いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...
ウェブサイトの構築を始めたばかりの初心者には、理解し、学ぶべきことがたくさんあります。ウェブサイトを...
目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...
スロークエリログ関連のパラメータMySQL スロー クエリ関連のパラメータの説明: slow_que...