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: '', password: '' } }, 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: '', password: '' } }, methods: { register() { // Handle registration logic } } } </script>
これらのコンポーネントには、フォームとテキストが含まれているだけです。ユーザーを登録ページまたはログイン ページに誘導する router-link タグも含まれています。また、login() メソッドと register() メソッドも追加しましたが、これらのメソッドはまだ実装されていません。
最後に、
<template> <div> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script>
これで、ページ切り替えに Vue Router を使用する準備が整いました。アプリケーションのルート URL にアクセスすると、Login コンポーネントが表示されます。登録ページのリンクをクリックすると、Register コンポーネントが表示されます。コードは次のとおりです。
#この記事では、Vue.js と Vue Router を使用してログイン ページの切り替えを実装する方法を学びました。 Login と Register という 2 つの Vue コンポーネントを作成しました。 Vue Router を使用してこれらのコンポーネント間を切り替える方法についても説明しました。これらの概念を独自の Vue.js アプリケーションに適用して、ユーザー認証エクスペリエンスを向上できるようになりました。
以上がVue.js を使用してログイン ページ切り替え効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。