Vue ページスタックマネージャーの詳細

1. 需要分析

Vue はweb App 、公式アカウント、ネイティブHybrid開発で頻繁に使用されるため、ページジャンプやロールバックの問題が発生するのは当然です。

シナリオ例:

リストページから詳細ページに入り、戻る
ある操作ページAを次のページBで選択し、選択後にページAに戻る必要がある（ページAも何が選択されたかを知る必要がある）
任意のページからログインページに入り、ログインまたは登録が成功したら元のページに戻り、戻り続けるとログインページに戻らないことを確認してください。
ブラウザのbackとforwardサポート（WeChatやミニプログラムに非常に便利）
iosのデフォルトのアニメーションを模倣するなど、特定の特別なページに入るとき、出るときにアニメーションを追加します (入るとページが右から左にパンし、出るとページが左から右にパンします)

2. 試した方法

以下の方法を試しましたが、どれも期待通りには機能しませんでした。

2.1 キープアライブ

通常、 route情報とkeep-aliveを通じてページがキャッシュされるかどうかを制御するには、2 つのrouter-viewが使用されます。これには 2 つの問題があります。

keep-alive同じページを一度だけ保存するため、同じページの2つのバージョンが存在することはありません。
2つのrouter-view間でtransitionやその他のアニメーションを使用する方法はありません

2.2 ネストされたルートを持つ CSS

私は、 cube-uiの例を見ていて、その例がページキャッシュの問題を解決しているように見えました。私は、その処理方法を借用（ copy ）してアップグレードし、 CSSとネストされたrouteを使用して基本的な要件を実現しました。

しかし、欠点もあります:

routeページ階層に従って厳密に記述する必要があります
多くのページは複数の場所で使用する必要があり、それらのルートを設定する必要があります（たとえば、商品詳細ページには複数の場所の入り口があります）

3. 機能説明

vue-routerを拡張すると、元のナビゲーションロジックを変更する必要はありません。
pushまたはforwardと、ページが再レンダリングされ、新しくレンダリングされたページがStackに追加されます。
「戻る」または「進む」（負の数）が押された場合、ページは再レンダリングされません。前のページはスタックから読み込まれ、フォームの内容、スクロールバーの位置など、前のコンテンツの状態が保持されます。
backまたは進む（負の数）場合、未使用のページはスタックから削除されます。
replace Stack内のページ情報が更新されます
前のページに戻ると、 activitedフック関数がトリガーされます
ブラウザの戻るおよび進むイベントをサポート
/user/fooから/user/barへのナビゲーションなど、ルーティングパラメータの変更への対応をサポートし、コンポーネントインスタンスが再利用されます。
前進と後退時に異なるアニメーションを追加したり、特別なページに特別なアニメーションを追加したりできます。

4. インストールと使用方法

インストール：

npm インストール vue-page-stack
＃ または
糸を追加 vue-page-stack

使用：

'vue' から Vue をインポートします
'vue-page-stack' から VuePageStack をインポートします。

// vue-router は必須です Vue.use(VuePageStack, { router }); 
// アプリ.vue
<テンプレート>
  <div id="アプリ">
    <vue-ページスタック>
      <ルータービュー></ルータービュー>
    </vue-ページスタック>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'、
  データ（） {
    戻る {
    };
  },
  コンポーネント: {},
  作成された() {},
  メソッド: {}
};
</スクリプト>

5. API

5.1 登録

登録時に、 VuePageStackの name とkeyNameを指定できますが、通常は必要ありません。

Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });

5.2 前進と後退

前進、後退、または特別なルートを進むときにアニメーションを追加したい場合は、 router-viewページでwatch $routeを使用し、 stack-key-dir （カスタムkeyNameもここで変更されます）パラメータを使用して、この時点での方向を決定します。例を参照してください。

6. 関連する指示

6.1 キー名

ルートにkeyNameパラメータが追加されるのはなぜですか? これは、ブラウザの戻るイベントと進むイベントをサポートするためです。この機能は、WeChat パブリックアカウントとミニプログラムで非常に重要です。

6.2 原則

現在のページを取得するStackセクションはkeep-aliveセクションを参照します。

このプラグインは長い間私の頭の中にありました。長い間断続的に作業してきましたが、ついに完成しました。本当に嬉しいです。

現在のバージョンは、ビジネス全体でテストされていません。同じニーズをお持ちの場合は、ぜひお試しください。コメントや提案がある場合は、 Githubでissueと PR を上げてください。サポートと貢献に感謝します。

このプラグインは vue-navigation と vue-nav の両方を参考にしています。私はそのインスピレーションにとても感謝しています。

Vue Page Stack Manager の詳細に関するこの記事はこれで終わりです。Vue Page Stack Manager に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: