Vue マルチページ構成の詳細

1. 複数ページの違い

シングルページアプリケーションの概念は、ここ数年のAngularJS 、 React 、 Emberなどのフレームワークの登場とともに生まれました。前回の紹介では、ページレンダリングにおけるページの部分更新について説明しました。シングルページアプリケーションでは、ページの部分更新機能を使用して、ページを切り替えるときにページコンテンツを更新し、より優れたエクスペリエンスを実現します。

2. SPAとMPA

シングルページSinglePage Web Applicationアプリケーション (SPA) とMultiPage Application (MPA) の違いは次のとおりです。

タイトル	スパ	MPA
構成	1 つのメインページ + 複数のページフラグメント	複数のページ
リソース共有 (css、js)	共有リソースは一度だけ読み込む必要がある	各ページは共通のリソースを読み込む必要がある
URLパターン	xxx/#/ページ1 xxx/#/ページ2	xxx/ページ1.html xxx/ページ2.html
リフレッシュ方法	ページの一部更新または変更	ページ全体を更新
ページジャンプ	シェルは変更されず、ローカルページのコンテンツが更新され、ジャンプアニメーションは簡単に実装できます。	あるページから別のページにジャンプすると、ジャンプアニメーションが実現できない
ユーザーエクスペリエンス	ページフラグメント間の切り替えが速く、ユーザーエクスペリエンスが優れている	ページの切り替えには再読み込みが必要で、時間がかかり、スムーズさも低いため、ユーザーエクスペリエンスが低下します。
データ転送	同じページで、グローバル変数は簡単に実装できます	URLパラメータ、Cookie、localStorageなどに依存すると実装が困難です。
検索エンジン最適化 (SEO)	実装が難しく、SEO 検索には役立ちません。	シンプルな実装方法
適用可能なシナリオ	高い経験要件のあるアプリケーション	検索エンジンに適したアプリが必要

3. Vue Cli スキャフォールディング構成

最初のステップ:

publicファイルの下にメインページとサブページを作成します。ディレクトリ構造は次のようになります。

ステップ2:

メインページとサブページには、対応するメインページエントリファイルとサブページエントリファイルが必要です。ディレクトリ構造は次のようになります。

ステップ3:

vue.config.jsでのpagesの構成は、複数のページの構成マッピングとして理解できます。

ページ: {
    索引： {
        エントリ: 'src/main.js',
        テンプレート: 'public/index.html',
        ファイル名: 'index.html',
    },
    バンバン:
        エントリ: 'src/banban.js',
        テンプレート: 'bangban.html',
        ファイル名: 'public/bangban.html'
    }
}

これで、vue マルチページ設定の詳細に関するこの記事は終了です。より関連性の高い vue マルチページ設定コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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