vue2实现登录界面

Vue 2可以通过组合使用Vue组件、路由和状态管理来实现登录界面。下面是一个简单的登录界面的实现示例：

首先，安装Vue CLI并创建一个新的Vue项目：

npm install -g @vue/cli
vue create my-login-app
cd my-login-app

然后，创建两个组件：Login.vue和Home.vue。Login.vue用于显示登录表单，Home.vue表示登录成功后的主页。

Login.vue：

<template>
  <div>
    <h2>Login</h2>
    <form @submit="login">
      <input type="text" v-model="username" placeholder="Username" required>
      <input type="password" v-model="password" placeholder="Password" required>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 处理登录逻辑，例如发送请求到后端进行验证
      if (this.username === 'admin' && this.password === 'password') {
        // 登录成功后跳转到主页
        this.$router.push('/home');
      } else {
        alert('Invalid credentials');
      }
    }
  }
};
</script>

Home.vue：

<template>
  <div>
    <h2>Welcome, {{ username }}!</h2>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '' // 在登录成功后会动态更新用户名
    };
  },
  mounted() {
    // 在此可以通过请求获取当前登录用户的信息
    this.username = 'admin';
  },
  methods: {
    logout() {
      // 执行登出逻辑，例如发送请求到后端注销用户
      this.username = '';
      this.$router.push('/login');
    }
  }
};
</script>

接下来，在`src/router/index.js`中配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../components/Login.vue';
import Home from '../components/Home.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/login', component: Login },
  { path: '/home', component: Home }
];

const router = new VueRouter({
  routes
});

export default router;

最后，在`src/main.js`中使用路由和状态管理器：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

这样，你就可以在`App.vue`中放置一个router-view组件来渲染登录界面或主页：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

以上是一个简单的登录界面的实现示例，希望对你有帮助！