Vue项目学习

创建项目

登录表单验证

    toLoginForm() {
      // 表单验证
      this.$refs.loginFormRef.validate(async (v) => {
        if (!v) {
          return;
        }
        let { data: res } = await this.$http.post("login", this.loginForm);
        
        if (res.meta.status !== 200) {
          this.$message.error('该用户不存在，请注册');
        } else {
          this.$message({
            message: "登陆成功",
            type: "success",
          });
          window.sessionStorage.setItem('token',res.data.token)
          this.$router.push('/home')
        }
      });
    },

使用elementui中的validate进行验证
其实ref除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法
ref作用

1. 基本用法，本页面获取dom元素
2. 获取子组件中的data
3. 调用子组件中的方法

绑定事件

页面权限-路由导航守卫