Vue.js を使用してログイン ページ切り替え効果を実現する方法

Vue.js は、シングルページ アプリケーションの実装を容易にする人気の JavaScript フレームワークです。中規模および大規模なアプリケーションではユーザー認証が不可欠であるため、Vue.js アプリケーションにログイン ページと登録ページを実装することが非常に重要です。

この記事では、Vue.jsを使ってログインページの切り替えを実装する方法を紹介します。 Login と Register という 2 つの Vue コンポーネントを作成します。 Login コンポーネントには登録ユーザー用のログイン フォームが含まれ、Register コンポーネントには新規ユーザー用の登録フォームが含まれます。 Vue Router を使用してこれらのコンポーネントを切り替えます。

まず、Vue.js と Vue Router をインストールする必要があります。コマンド ラインで次のコマンドを実行します。

npm install vue vue-router --save

次に、プロジェクトのエントリ ファイル (main.js) に Vue と Vue Router をインポートし、Vue Router を Vue に追加します。コードは次のとおりです。

import Vue from 'vue'; import VueRouter from 'vue-router'; import LoginComponent from './components/LoginComponent.vue'; import RegisterComponent from './components/RegisterComponent.vue'; Vue.use(VueRouter); const router = new VueRouter({ routes: [ { path: '/', name: 'login', component: LoginComponent }, { path: '/register', name: 'register', component: RegisterComponent } ] }); new Vue({ router }).$mount('#app');

このコードでは、LoginComponent と RegisterComponent をインポートしました。これらのコンポーネントはルーターで使用されます。

次に、2 つのルーティング パス「/」と「/register」を定義し、それぞれのコンポーネントを指定します。

最後に、Vue ルーターを Vue に追加し、$mount メソッドを使用して、指定された DOM 要素に Vue インスタンスをマウントします。ここでは、Vue インスタンスを ID「app」の DOM 要素にマウントします。

次に、ログイン コンポーネントと登録コンポーネントを作成する必要があります。これらのコンポーネントを単一ファイル コンポーネントとして定義できます。ここでは、テンプレート タグとスクリプト タグを使用してこれらのコンポーネントを単純に定義します。コードは次のとおりです。

LoginComponent.vue

RegisterComponent.vue

これらのコンポーネントには、フォームとテキストが含まれているだけです。ユーザーを登録ページまたはログイン ページに誘導する router-link タグも含まれています。また、login() メソッドと register() メソッドも追加しましたが、これらのメソッドはまだ実装されていません。

最後に、 タグをテンプレートに追加する必要があります。このタグは、ページ上で現在アクティブなルーティング コンポーネントをレンダリングします。プロジェクトの App.vue ファイルで、これを次のコードに追加できます:

これで、ページ切り替えに Vue Router を使用する準備が整いました。アプリケーションのルート URL にアクセスすると、Login コンポーネントが表示されます。登録ページのリンクをクリックすると、Register コンポーネントが表示されます。コードは次のとおりです。

#この記事では、Vue.js と Vue Router を使用してログイン ページの切り替えを実装する方法を学びました。 Login と Register という 2 つの Vue コンポーネントを作成しました。 Vue Router を使用してこれらのコンポーネント間を切り替える方法についても説明しました。これらの概念を独自の Vue.js アプリケーションに適用して、ユーザー認証エクスペリエンスを向上できるようになりました。

以上がVue.js を使用してログイン ページ切り替え効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。