vue2 登录注册写法完整代码展示

以下是一个简单的 Vue 2 登录注册页面的完整代码展示。其中使用了 Vue Router 管理路由，使用了 Vuex 管理状态，使用了 axios 发送网络请求。

<template>
  <div>
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(VueRouter);
Vue.use(Vuex);

const routes = [
  {
    path: '/login',
    component: {
      template: `
        <div>
          <h2>登录</h2>
          <form @submit.prevent="login">
            <label>
              用户名：
              <input v-model="username" type="text" required>
            </label>
            <label>
              密码：
              <input v-model="password" type="password" required>
            </label>
            <button type="submit">登录</button>
          </form>
        </div>
      `,
      data() {
        return {
          username: '',
          password: '',
        };
      },
      methods: {
        async login() {
          try {
            const response = await axios.post('/api/login', {
              username: this.username,
              password: this.password,
            });
            this.$store.commit('login', response.data);
            this.$router.push('/');
          } catch (error) {
            window.alert('登录失败，请检查用户名和密码是否正确。');
          }
        },
      },
    },
  },
  {
    path: '/register',
    component: {
      template: `
        <div>
          <h2>注册</h2>
          <form @submit.prevent="register">
            <label>
              用户名：
              <input v-model="username" type="text" required>
            </label>
            <label>
              密码：
              <input v-model="password" type="password" required>
            </label>
            <button type="submit">注册</button>
          </form>
        </div>
      `,
      data() {
        return {
          username: '',
          password: '',
        };
      },
      methods: {
        async register() {
          try {
            const response = await axios.post('/api/register', {
              username: this.username,
              password: this.password,
            });
            this.$store.commit('login', response.data);
            this.$router.push('/');
          } catch (error) {
            window.alert('注册失败，请检查用户名是否已经被注册。');
          }
        },
      },
    },
  },
];

const router = new VueRouter({
  routes,
});

const store = new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    login(state, user) {
      state.user = user;
    },
    logout(state) {
      state.user = null;
    },
  },
});

const app = new Vue({
  router,
  store,
}).$mount('#app');
</script>

在这个例子中，我们使用了 Vue Router 来管理路由，使用了 Vuex 来管理状态。在登录和注册页面中，我们使用了 axios 发送网络请求。在登录成功和注册成功时，我们使用 Vuex 中的 mutations 来更新用户状态，并使用 Vue Router 跳转到首页。