vue实现两个登录页面
实现多个登录页面的方法
在Vue项目中实现两个不同的登录页面，可以通过路由配置和组件分离的方式完成。以下是具体实现步骤：
路由配置
在router/index.js文件中配置两个不同的路由路径指向不同的登录组件：
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login.vue')
},
{
path: '/admin-login',
name: 'AdminLogin',
component: () => import('@/views/AdminLogin.vue')
}
]创建不同登录组件
创建两个独立的Vue组件文件：
- src/views/Login.vue (普通用户登录)
- src/views/AdminLogin.vue (管理员登录)
每个组件可以有不同的表单设计和验证逻辑：
<!-- Login.vue -->
<template>
<div class="user-login">
<h2>用户登录</h2>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名">
<input v-model="password" type="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</div>
</template>样式隔离
为不同登录页面添加不同的样式类名，确保样式不会冲突：
/* Login.vue 样式 */
.user-login {
background: #f5f5f5;
}
/* AdminLogin.vue 样式 */
.admin-login {
background: #eef;
}导航到不同登录页
在应用中添加导航链接时，分别指向不同的登录路由：
<router-link to="/login">用户登录</router-link>
<router-link to="/admin-login">管理员登录</router-link>权限处理
根据不同的登录类型，在登录成功后跳转到不同的页面：
// Login.vue methods
handleLogin() {
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({ path: '/' })
})
}
// AdminLogin.vue methods
handleLogin() {
this.$store.dispatch('admin/login', this.loginForm).then(() => {
this.$router.push({ path: '/admin' })
})
}动态路由守卫
在路由守卫中根据用户角色进行权限验证：
router.beforeEach((to, from, next) => {
if (to.path.startsWith('/admin') && !isAdmin()) {
return next('/login')
}
next()
})
