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>