マルチページビューを適用する方法-フロントエンドQ&A-php.cn

マルチページビューを適用する方法

WBOY

リリース： 2023-05-08 12:46:08

オリジナル

3752 人が閲覧しました

インターネット時代の急速な発展に伴い、マルチページアプリケーションのアーキテクチャを使用して実装される Web サイトやアプリケーションがますます増えており、従来のシングルページアプリケーションでは開発ニーズを満たすのに十分ではなくなりました。マルチページアプリケーションの実装では、フロントエンドフレームワーク Vue が開発者にとって徐々に最初の選択肢になりました。

Vue はコンポーネント化により開発効率を向上させる軽量 JavaScript フレームワークで、Vue の基本的な使い方については以前の記事でも紹介しました。この記事では、Vueを使ってマルチページアプリケーションを実装する方法を紹介します。

複数の Vue インスタンスを作成する

マルチページアプリケーションでは、各ページに独立した Vue インスタンスが必要なので、各ページに JavaScript ファイルが必要です Vue インスタンスを作成するで。 Vue が提供するコンストラクター Vue を使用してインスタンスを作成し、それをページの DOM 要素にマウントできます。

たとえば、ページの JavaScript ファイルに Vue インスタンスを作成できます。

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

ログイン後にコピー

上記のコードでは、Vue のコンストラクターを使用して Vue インスタンスを作成し、マウントします。 ID app の DOM 要素。 render オプションはコンポーネントをレンダリングするために使用されます。ここでは App.vue というコンポーネントを導入しました。

Vue Router を使用してルーティングを管理する

マルチページアプリケーションでは、各ページが異なるルートに対応するため、Vue Router を使用してルーティングを管理する必要があります。 Vue Router は、Vue が正式に発表したルーティング管理ライブラリで、シームレスなインターフェースの切り替えやデータ転送を実現できます。

各ページの JavaScript ファイルに Vue Router を導入し、ルーティングインスタンスを作成できます。ルーティングインスタンスでは、ルーティングパスと各ページの対応するコンポーネントを構成できます。

たとえば、/page1 と /page2 という 2 つのページがあると仮定すると、ルーティングインスタンスで次のように設定できます:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Page1 from './Page1.vue';
import Page2 from './Page2.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 }
  ]
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

ログイン後にコピー

上記のコードでは、まず Vue Router を導入して使用します。次に、ルーティングインスタンスを作成し、ルーティングインスタンス内に 2 つのルート、つまり 2 つのコンポーネント Page1 と Page2 に対応する /page1 と /page2 を設定します。最後に、ルートインスタンスを Vue インスタンスのオプションにします。

VueX を使用してステータスを管理する

複数ページのアプリケーションでは、多くの場合、異なるページ間のステータスを共有する必要があります。これを行うには、Vue によって正式に開始された状態管理ライブラリである VueX を導入する必要があります。 VueX はコンポーネントのデータステータスを一元管理し、コンポーネント間のステータス共有を実現します。

各ページのJavaScriptファイルでは、VueXを導入してストアを作成する必要があります。ストアでは、グローバル状態を定義し、状態を変更し、突然変異やアクションを通じて非同期に動作する機能を提供できます。

たとえば、ストア内でグローバルカウンターの状態を定義できます。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000)
    }
  }
});

export default store;

ログイン後にコピー

上記のコードでは、まず VueX を導入し、それを使用します。次に、ストアを作成し、state でグローバルカウンターの状態を定義します。ミューテーションでは、状態の変更メソッド increment を提供します。アクションでは、ステータスの非同期操作 incrementAsync を提供します。これにより、1 秒後にステータスが更新されます。

webpack を使用してアプリケーションをパッケージ化する

最後に、アプリケーションコードがすべて完成したら、webpack を使用してアプリケーションを実際のファイルにパッケージ化する必要があります。 webpack を使用すると、1 つ以上の出力ファイルに書き込むさまざまな JavaScript モジュール、CSS ファイル、画像、その他のリソースをパッケージ化し、構成を通じてコード圧縮、コード分離、オンデマンド読み込みなどの機能を実現できます。

Vue CLI で Webpack を選択すると、Vue プロジェクトをすばやく作成できます。既存のプロジェクトがすでにある場合は、webpack、vue-loader、およびその他の関連する npm モジュールを使用して、プロジェクトをパッケージ化するように webpack を手動で構成できます。

概要:

上記の 4 つの手順を通じて、Vue を使用して基本的なマルチページアプリケーションを実装できます。もちろん、実際の開発では、