用vue实现登录切换
Vue 实现登录切换功能
登录切换功能通常涉及表单切换（如登录/注册）或用户状态切换（如登录/登出）。以下是两种常见场景的实现方法：
表单切换（登录/注册）
1. 使用动态组件切换表单
<template>
<div>
<button @click="showLogin = true">登录</button>
<button @click="showLogin = false">注册</button>
<component :is="showLogin ? LoginForm : RegisterForm" />
</div>
</template>
<script>
import LoginForm from './LoginForm.vue';
import RegisterForm from './RegisterForm.vue';
export default {
components: { LoginForm, RegisterForm },
data() {
return {
showLogin: true
};
}
};
</script>2. 条件渲染实现切换
<template>
<div>
<button @click="currentForm = 'login'">登录</button>
<button @click="currentForm = 'register'">注册</button>
<form v-if="currentForm === 'login'" @submit="handleLogin">
<input type="text" placeholder="用户名" v-model="loginData.username">
<input type="password" placeholder="密码" v-model="loginData.password">
</form>
<form v-else @submit="handleRegister">
<input type="text" placeholder="用户名" v-model="registerData.username">
<input type="password" placeholder="密码" v-model="registerData.password">
<input type="email" placeholder="邮箱" v-model="registerData.email">
</form>
</div>
</template>
<script>
export default {
data() {
return {
currentForm: 'login',
loginData: { username: '', password: '' },
registerData: { username: '', password: '', email: '' }
};
},
methods: {
handleLogin() { /* 登录逻辑 */ },
handleRegister() { /* 注册逻辑 */ }
}
};
</script>用户状态切换（登录/登出）
1. 使用 Vuex 管理状态
<template>
<div>
<button v-if="!isLoggedIn" @click="login">登录</button>
<button v-else @click="logout">登出</button>
<p>{{ isLoggedIn ? '已登录' : '未登录' }}</p>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['isLoggedIn'])
},
methods: {
...mapMutations(['setLoginStatus']),
login() {
this.setLoginStatus(true);
},
logout() {
this.setLoginStatus(false);
}
}
};
</script>2. 使用路由守卫控制
// router.js
router.beforeEach((to, from, next) => {
const isAuthenticated = store.state.isLoggedIn;
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});动画过渡效果
为切换添加平滑过渡：
<transition name="fade" mode="out-in">
<component :is="currentComponent" :key="currentComponent" />
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>注意事项
- 表单切换时建议重置表单数据，避免残留
- 登录状态应持久化（如使用 localStorage）
- 敏感操作需添加二次确认
- 移动端可考虑使用选项卡式切换（如 vant-ui 的 Tab 组件）
以上方法可根据实际项目需求组合使用，例如同时实现表单切换和状态切换。
