How to use Vue.js to achieve login page switching effect

Vue.js is a popular JavaScript framework that makes it easy to implement single-page applications. In medium and large applications, user authentication is essential, so it is very important to implement login and registration pages in Vue.js applications.

This article will introduce how to use Vue.js to implement login page switching. We will create two Vue components: Login and Register. The Login component will contain a login form for registered users, while the Register component will contain a registration form for new users. We will use Vue Router to switch these components.

First, we need to install Vue.js and Vue Router. Run the following command in the command line:

npm install vue vue-router --save

Next, import Vue and Vue Router in the project's entry file (main.js), and then add Vue Router to Vue. The code is as follows:

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

In this code, we imported LoginComponent and RegisterComponent. These components will be used in the router.

Next, we define two routing paths: "/" and "/register", and specify their components respectively.

Finally, we add the Vue Router to Vue and use the $mount method to mount the Vue instance to the specified DOM element. Here, we mount the Vue instance to the DOM element with the id "app".

Next, we need to create Login and Register components. We can define these components as single file components. Here we will simply define these components using template and script tags. The code is as follows:

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>

These components simply contain a form and some text. We also include a router-link tag that will direct the user to the registration page or login page. We also added login() and register() methods, but these methods are not implemented yet.

Finally, we need to add the tag to the template. This tag will render the currently active routing component on the page. In the project's App.vue file, we can add this to the following code:

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

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

Now we are ready to use Vue Router for page switching. When we visit the root URL of the application, we will see the Login component. When we click on the registration page link, we will see the Register component. The code is as follows:

#In this article, we learned how to use Vue.js and Vue Router to implement login page switching. We created two Vue components: Login and Register. We also covered how to use Vue Router to switch between these components. Now you can apply these concepts to your own Vue.js applications for a better user authentication experience.

The above is the detailed content of How to use Vue.js to achieve login page switching effect. For more information, please follow other related articles on the PHP Chinese website!