vue-element2

• :router="true"表示跳转
• index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串 传 给index，因为i是从0开始的 所以需要加1
• :index="'/index/'+item.path"路劲前面需要加斜杠/，不加会出现luj覆盖问题

<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <!-- :default-openeds="['1', '3']" 表示默认打开第一个和第三个菜单 -->
      <!-- 1 对应了el-submenu index="1"
           2 对应了el-submenu index="2" -->
      <!-- el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项-->
      <el-menu :default-openeds="['1']" :router="true">
        <!-- index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串 传给index -->
        <!-- 因为i是从0开始的 所以需要加1 -->
        <el-submenu
          :index="(i + 1).toString()"
          v-for="(v, i) in navList"
          :key="i"
        >
          <template slot="title"
            ><i class="el-icon-menu"></i>{{ v.authName }}</template
          >
          <!-- 子选项需要改成例如：1-1格式 以字符串的形式传给index属性 -->
          <!-- 因为子选项也是一个数组所以需要再次循环 -->
          <!--  :index="'/index/'+item.path"路劲前面需要加斜杠/，不加会出现luj覆盖问题 -->
          <el-menu-item
            :index="'/index/'+item.path"
            v-for="(item, index) in v.children"
            :key="index"
            >{{ item.authName }}</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </el-aside>

注册页面

<template>
  <div class="box">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="85px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <!-- /.number -->
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="alignpassword">
        <el-input
          type="password"
          v-model="ruleForm.alignpassword"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          type="text"
          v-model="ruleForm.email"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
  
    var checkUsername = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("用户名不能为空"));
      } else {
        if (!/[\w\u4e00-\u9fa5]{1,8}/.test(value)) {
          return callback(new Error("用户名格式不对"));
        } else {
          callback();
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      let regex =/\w{8,16}/ 
      if (value === "") {
        return callback(new Error("密码不能为空"));
      } else {
        if (!regex.test(value)) {
          return callback(new Error("密码格式不正确"));
        } else {
          callback();
        }
      }
    };
    var checkAlignMsg = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("密码不能为空"));
      } else {
        if (value!==this.$data.ruleForm.password) {
          return callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      }
    };
    var checkEmail = (rule,value,callback)=>{
      let regex = /\w{1,11}@\w{2,11}\.com/
      if(value==''){
        return callback (new Error('邮箱不能为空'))
      }else{
        if(!regex.test(value)){
          return callback (new Error('邮箱格式不正确'))
        }else{
          callback();
        }  
      }
    }

    return {
      ruleForm: {
        username: "",
        password: "",
        alignpassword:"",
        email:""

      },
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: checkUsername, trigger: "blur" }],
        alignpassword: [{ validator: checkAlignMsg, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
   },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.box {
  padding: 10px;
  width: 410px;
  margin: 50px 400px;
  color: whitesmoke;
  background: linear-gradient(to right,skyblue,pink);
}
.el-form-item__label{
  padding: 0;
  text-align: center;
}
</style>