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

<template>
  <div>
    <h2>Log In</h2>
    <form>
      <div>
        <label>Username</label>
        <input>
      </div>
      <div>
        <label>Password</label>
        <input>
      </div>
      <button>Log In</button>
    </form>
    <p>Don't have an account? <router-link>Register here.</router-link></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: &#39;&#39;,
      password: &#39;&#39;
    }
  },
  methods: {
    login() {
      // Handle login logic
    }
  }
}
</script>

RegisterComponent.vue

<template>
  <div>
    <h2>Register</h2>
    <form>
      <div>
        <label>Username</label>
        <input>
      </div>
      <div>
        <label>Password</label>
        <input>
      </div>
      <button>Register</button>
    </form>
    <p>Already have an account? <router-link>Log in here.</router-link></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: &#39;&#39;,
      password: &#39;&#39;
    }
  },
  methods: {
    register() {
      // Handle registration logic
    }
  }
}
</script>

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

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

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: &#39;app&#39;
}
</script>

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

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

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