Vue + ElementUi 实现：登录页面通过单选框选择进入用户或管理员页面

在Vue中结合Element UI实现登录页面根据单选框选择进入不同用户或管理员页面的功能，可以通过动态切换组件来实现。以下是一个简单的示例：

1. 安装Element UI:

npm install element-ui --save

2. 在Vue组件中引入Element UI和定义登录页面:

<template>
  <div class="login-container">
    <el-radio-group v-model="role" @change="handleRoleChange">
      <el-radio label="user">普通用户</el-radio>
      <el-radio label="admin">管理员</el-radio>
    </el-radio-group>
    <!-- 根据role的值动态切换组件 -->
    <component :is="currentComponent"></component>
  </div>
</template>
 
<script>
import UserPage from './UserPage.vue';
import AdminPage from './AdminPage.vue';
 
export default {
  data() {
    return {
      role: 'user', // 默认选中普通用户
      currentComponent: 'user-page', // 默认展示普通用户页面
    };
  },
  components: {
    'user-page': UserPage,
    'admin-page': AdminPage,
  },
  methods: {
    handleRoleChange(role) {
      this.currentComponent = role === 'user' ? 'user-page' : 'admin-page';
    },
  },
};
</script>
 
<style>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

3. 创建UserPage.vue和AdminPage.vue组件:

UserPage.vue:

<template>
  <div>
    <h1>用户页面</h1>
    <p>这里是普通用户的内容</p>
  </div>
</template>
 
<script>
export default {
  // UserPage组件的逻辑
};
</script>

AdminPage.vue:

<template>
  <div>
    <h1>管理员页面</h1>
    <p>这里是管理员的内容</p>
  </div>
</template>
 
<script>
export default {
  // AdminPage组件的逻辑
};
</script>

在这个例子中，我们定义了一个登录页面，其中包含了Element UI的单选框组件el-radio-group。根据用户选择的单选框，我们通过computed property动态设置展示的组件，并在handleRoleChange方法中更新当前组件。这样，用户可以根据自己的身份选择进入不同的页面。