vue进阶总结二

上篇仅仅谈论到接口数据渲染，这篇主要是使用过程中的demo

web端牵扯到会员，那就需要跳转路由判断是否登录

解决方法：1、路由配置文件router/index.js 跳转路由前判断是否登录2、关于涉及权限页面组件加载函数判断

router.beforeEach((to, from, next) => {
  // console.log(to.path);
  if (to.path === '/login' || to.path === '/forgetpwd') {
    next();
  } else {
    let tokens = localStorage.getItem('token');
    if (tokens == 'null' || tokens == '') {
      next('/login');
    } else {
      next();
    }
  }
});
export default router;

mounted() {
   let that = this
   that.islogin();
},
methods:{
	islogin(){
		//...
	},
}

表单验证基于element，密码和验证码比对

	<el-form ref="testform" :rules="testrulesyzm" :model="testform">
              <el-form-item label="手机号" prop="phonenum">
                <el-input value="" v-model="testform.phonenum" placeholder="手机号"></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="15">
                  <el-form-item prop="pyzm">
                    <el-input v-model="testform.pyzm" placeholder="短信验证码" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="2">&nbsp;</el-col>
                <el-col :span="7">
                  <el-button v-if="isyzm" @click="getyzm()" type="primary" style="width: 100%;">发送验证码</el-button>
                  <el-button v-else disabled @click="getyzm()" type="primary" style="width: 100%;">发送验证码</el-button>
                </el-col>
              </el-row>

              <el-form-item label="新密码" prop="newpwd">
                <el-input type="password" v-model="testform.newpwd" placeholder="请输入新密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="dnewpwd">
                <el-input type="password" v-model="testform.dnewpwd" placeholder="请输入确认密码"></el-input>
              </el-form-item>
              <el-button v-if="issub" @click='setpwd()' type="primary">提交</el-button>
              <el-button v-else disabled @click='setpwd()' type="primary">提交</el-button>
              <el-button @click="login()" style="float: right;" type="text">登录</el-button>
              {{errmsgyzm}}
            </el-form>

数据data：

data(){
	return {
		testform: {
          phonenum: '',
          yzm: '',
          newpwd: '',
          dnewpwd: '',
          'pyzm': ''
        },
        testrulesyzm: {
          phonenum: [{
            required: true,
            message: '请输入手机号',
            trigger: "blur"
          }, ],
          pyzm: [{
            required: true,
            message: '请输入验证码',
            trigger: "blur"
          }, ],
          newpwd: [{
              required: true,
              message: '请输入新密码',
              trigger: "blur"
            }, {
              min: 8,
              max: 16,
              message: '请输入8-16位字符',
              trigger: 'blur'
            },

          ],
          dnewpwd: [{
            required: true,
            message: '请输入确认密码',
            trigger: "blur"
          }, ]
        },
	}
}

这样的触发，激活输入框然后blur，提交表单的时候触发验证：this.$refs[‘testform’].validate((valid)=>{}

methods:{
	setpwd() {
        this.$refs['testform'].validate((valid) => {
          if (valid) {
            if (this.testform.newpwd === this.testform.dnewpwd) {
              this.dosetpwd();
            } else {
               // console.log('error submit!!');
              this.errmsgyzm = '两次输入密码不一致';
            }
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
}

HTML渲染

<div v-html='contents'></div>

element的table多维数组渲染citylist.row.areas

	<el-table :data="citylist"  :height="tableHeight" style="width: 100%;">
          <el-table-column fixed prop="province" label="省" width="80">
          </el-table-column>
          <el-table-column prop="areas" label="市">
            <slot slot-scope="citylist">
              <span style="margin:0 5px"  v-for="(v,index) in citylist.row.areas" type="primary" :key='index'>
                <a @click="selcity(v.id,v.name)" style="color:#0074D9;cursor: pointer;">{{v.name}}</a>
              </span>
            </slot>
          </el-table-column>

        </el-table>