Vue3.0 简单商城—Header组件与登录模块编写
原文链接：Vue3.0 简单商城—Header组件与登录模块编写 – 每天进步一点点
</template>
<script>
export default {
name: "Login",
data() {
return {
username: "",
password: "",
};
},
methods: {
//登录方法：
userLogin() {
if (this.acount == "") {
alert("用户名不能为空");
return;
} else if (this.password == "") {
alert("密码不能为空");
return;
} else {
//模拟向后台请求数据
alert("登录成功")
//使用localstorage存储
let userData = {
username: this.username,
password: this.password,
};
//如果localStorage监测到userToken就认为登录成功了
localStorage.setItem("userToken", JSON.stringify(userData)); //使用json，便于观察数据
//localStorage.setItem("userToken", userData);
console.log(userData)
this.$router.push("/home") //路由跳转
}
},
},
};
</script>
<style>
.box-card {
margin: 5% 25% 5% 25%;
width: 50%;
}
</style>
然后在路由中，添加登录组件的信息，让header组件可以跳转到路由组件中。
// 定义路由
const routes = [
{
path: '/',
name: 'index',
component: index,
},
{
path:'/login',
name:'login',
component:login,
}
];
这样便能实现简单的登录功能，效果图如下：
