Vue-ele实战登录页完善，主页由导航展示，路由动态跳转

主页submitForm方法完善，真实接口

submitForm(formName) {

      this.$refs[formName].validate((valid) => {

        /* el-form组件的validate方法 在回调函数中，如果vaild为true，则表示表单验证通过，为false则不通过 */

        if (valid) {

          axios.post('http://time*******.com:8889/api/private/v1/login',{

            username:this.ruleForm.username,

            password:this.ruleForm.password

          })

          .then(res=>{

            let {data,meta}=res.data;

            if(meta.status==200){

              this.$message.success(meta.msg);

              localStorage.username=data.username;

              localStorage.token=data.token;

              /* 登陆成功下一秒跳转首页 */

              setTimeout(() => {

                this.$router.push({name:'index'})

              }, 1000);

            }else{

              /* 用过户名密码不正确的时候出现警告 */

              this.$message.warning(meta.msg)

            }

          })

          .catch(err=>{

            console.log(err);

          })

        } else {

          console.log("error submit!!");

          return false;

        }

      });

    }

主页制作