关于Vue页面跳转的小总结

1：在利用Vue框架Element-ui时，需要有个功能是通过判断method的种类，对点击保存成功以后需要页面跳转

<!--操作按钮-->
			<el-form>
				<el-form-item :label-width="formParams.formLabelWidth" style="margin-left:-100px;margin-top:20px;">
					<el-button @click="submitForm('ruleForm','')" type="primary">保存</el-button>
					<el-button @click="submitForm('ruleForm','T')" type="primary">提交</el-button>
				</el-form-item>
			</el-form>

以下是按钮的保存函数，在通过提交表单内容以后，判断并作出对应的需求
**

页面跳转用到了 this.$router.push({path:’/页面名称’});

**

submitForm(formName, Method) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						if (Method == '') {
							if (this.data01.Content.DocEntry <= 0) {
								this.submitFun('A')								
							} else{
								this.submitFun('U')							
							}
						} else{
							this.submitFun(Method)
						}
						
						/*this.submitFun(Method)*/
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			submitFun: async function(Method) {
				this.data01.Method = Method;
				if(this.isUpdate && Method !== "T") this.data01.Method = "U";
				this.data01.Content.DocDate = this.timeChange(this.data01.Content.DocDate)
				const res = await this.$http.post(global.MDM + '/MDM0174/MDM017401', this.data01, true)
				if(res.Status === 200) {
					this.$notify.success({
						title: '成功'						
					});
					if (Method == "A") {
					   this.$router.push({path:'/MDM0174'});
					} 
				} else {
					this.$notify.warning({
						title: '读取失败',
						message: res.Status + '：' + res.Message
					})
				}
			},

再加一个在mint-ui中的案例

 <mt-tab-container-item id="1">
		       <ul class="useCar_list" v-if="useCarList.length"
	            v-infinite-scroll="loadMore1"
	            infinite-scroll-disabled="loading"
	            infinite-scroll-distance="50">
						<li v-for="useCar in useCarList" @click="whereToGo(useCar.DocEntry,useCar.DocStatus)">
							<div class="title">
								<span class="titleContent">用车申请</span>
								<span v-bind:class="useCar.DocStatus=='O' ? 'titleStatus':'titleStatusSuccess'" >{{useCar.DocStatus | useCarDocStatus}}</span>
							</div>
							<div>出车是由：<span>{{useCar.Comment}}</span></div>
							<div>出车出发时间：<span>{{useCar.StartDate}}</span></div>
							<div>出车位置：<span>{{useCar.StartLAddress}}</span></div>
								<div>出车车牌： <span>{{useCar.CarNo}}</span></div>
							<div>出车时里程数： <span>{{useCar.StartKm}}</span></div>
						</li>
			   </ul>
			   <p v-show="loading" style="display:flex">
		        <mt-spinner color="#26a2ff"  style="margin:0 auto" type="fading-circle"></mt-spinner>
		     </p>
		     <div v-if="isData1" class="empty">
				    <img src="../assets/img/empty.png">
					暂无申请记录
				 </div>
	      </mt-tab-container-item>

这是基于钉钉的mint-ui的微应用，有个按钮会有跳转功能

	whereToGo (DocEntry , DocStatus) {
				if(DocStatus == 'O'){
                	this.$router.push('/CarRecordEndPc_'+DocEntry)
				} else {
                    this.$router.push('/CarRecordDetailPc_'+DocEntry)
				}
				
			},