Comment utiliser Vue.js pour obtenir un effet de changement de page de connexion

Vue.js est un framework JavaScript populaire qui facilite la mise en œuvre d'applications monopage. Dans les applications de moyenne et grande taille, l'authentification des utilisateurs est essentielle, il est donc très important d'implémenter des pages de connexion et d'enregistrement dans les applications Vue.js.

Cet article expliquera comment utiliser Vue.js pour implémenter le changement de page de connexion. Nous allons créer deux composants Vue : Connexion et Enregistrement. Le composant Connexion contiendra un formulaire de connexion pour les utilisateurs enregistrés, tandis que le composant Registre contiendra un formulaire d'inscription pour les nouveaux utilisateurs. Nous utiliserons Vue Router pour changer ces composants.

Tout d'abord, nous devons installer Vue.js et Vue Router. Exécutez la commande suivante dans la ligne de commande :

npm install vue vue-router --save

Ensuite, importez Vue et Vue Router dans le fichier d'entrée du projet (main.js), puis ajoutez Vue Router à Vue. Le code est le suivant :

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

Dans ce code, nous avons importé LoginComponent et RegisterComponent. Ces composants seront utilisés dans le routeur.

Ensuite, nous définissons deux chemins de routage : "/" et "/register", et spécifions respectivement leurs composants.

Enfin, nous ajoutons le Routeur Vue à Vue et utilisons la méthode $mount pour monter l'instance Vue sur l'élément DOM spécifié. Ici, nous montons l'instance Vue sur l'élément DOM avec l'identifiant "app".

Ensuite, nous devons créer les composants de connexion et d'enregistrement. Nous pouvons définir ces composants comme des composants de fichier unique. Ici, nous définirons simplement ces composants à l'aide de balises de modèle et de script. Le code est le suivant :

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>

Ces composants contiennent simplement un formulaire et du texte. Nous incluons également une balise de lien de routeur qui dirigera l'utilisateur vers la page d'inscription ou la page de connexion. Nous avons également ajouté les méthodes login() et register(), mais ces méthodes ne sont pas encore implémentées.

Enfin, nous devons ajouter la balise Cette balise affichera le composant de routage actuellement actif sur la page. Dans le fichier App.vue du projet, nous pouvons ajouter ceci au code suivant :

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

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

Nous sommes maintenant prêts à utiliser Vue Router pour le changement de page. Lorsque nous accédons à l'URL racine de l'application, nous verrons le composant de connexion. Lorsque nous cliquons sur le lien de la page d'inscription, nous verrons le composant S'inscrire. Le code est le suivant :

Dans cet article, nous avons appris à utiliser Vue.js et Vue Router pour implémenter le changement de page de connexion. Nous avons créé deux composants Vue : Connexion et Enregistrement. Nous avons également expliqué comment utiliser Vue Router pour basculer entre ces composants. Vous pouvez désormais appliquer ces concepts à vos propres applications Vue.js pour une meilleure expérience d'authentification des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!