Cara menggunakan Vue.js untuk mencapai kesan penukaran halaman log masuk

Vue.js ialah rangka kerja JavaScript popular yang boleh melaksanakan aplikasi satu halaman dengan mudah. Dalam aplikasi sederhana dan besar, pengesahan pengguna adalah penting, jadi sangat penting untuk melaksanakan halaman log masuk dan pendaftaran dalam aplikasi Vue.js.

Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk melaksanakan penukaran halaman log masuk. Kami akan mencipta dua komponen Vue: Log Masuk dan Daftar. Komponen Log Masuk akan mengandungi borang log masuk untuk pengguna berdaftar, manakala komponen Daftar akan mengandungi borang pendaftaran untuk pengguna baharu. Kami akan menggunakan Penghala Vue untuk menukar komponen ini.

Pertama, kita perlu memasang Vue.js dan Vue Router. Jalankan arahan berikut dalam baris arahan:

npm install vue vue-router --save

Seterusnya, import Vue dan Vue Router dalam fail kemasukan projek (main.js), dan kemudian tambah Vue Router ke Vue. Kodnya adalah seperti berikut:

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');

Dalam kod ini, kami mengimport LoginComponent dan RegisterComponent. Komponen ini akan digunakan dalam penghala.

Seterusnya, kami mentakrifkan dua laluan penghalaan: "/" dan "/register", dan menentukan komponennya masing-masing.

Akhir sekali, kami menambah Penghala Vue pada Vue dan menggunakan kaedah $mount untuk melekapkan tika Vue ke elemen DOM yang ditentukan. Di sini, kami melekapkan contoh Vue ke elemen DOM dengan id "aplikasi".

Seterusnya, kita perlu mencipta komponen Log Masuk dan Daftar. Kita boleh mentakrifkan komponen ini sebagai komponen fail tunggal. Di sini kami hanya akan mentakrifkan komponen ini menggunakan teg templat dan skrip. Kodnya adalah seperti berikut:

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>

Komponen ini hanya mengandungi borang dan beberapa teks. Kami juga menyertakan teg pautan penghala yang akan mengarahkan pengguna ke halaman pendaftaran atau halaman log masuk. Kami juga menambah kaedah log masuk() dan daftar(), tetapi kaedah ini belum dilaksanakan lagi.

Akhir sekali, kita perlu menambah teg Teg ini akan memaparkan komponen penghalaan yang sedang aktif pada halaman. Dalam fail App.vue projek, kami boleh menambahkannya pada kod berikut:

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

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

Kini kami bersedia untuk menggunakan Penghala Vue untuk penukaran halaman. Apabila kami mengakses URL akar aplikasi, kami akan melihat komponen Log Masuk. Apabila kita mengklik pada pautan halaman pendaftaran, kita akan melihat komponen Daftar. Kodnya adalah seperti berikut:

Dalam artikel ini, kami mempelajari cara menggunakan Vue.js dan Vue Router untuk melaksanakan penukaran halaman log masuk. Kami mencipta dua komponen Vue: Log Masuk dan Daftar. Kami juga membincangkan cara menggunakan Penghala Vue untuk bertukar antara komponen ini. Kini anda boleh menggunakan konsep ini pada aplikasi Vue.js anda sendiri untuk pengalaman pengesahan pengguna yang lebih baik.

Atas ialah kandungan terperinci Cara menggunakan Vue.js untuk mencapai kesan penukaran halaman log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!