下面是原代码,问题写在代码中的注释里了:
<form v-on:submit.prevent="tosub($event)">
姓名 <input type="text" name='username' v-model="username" placeholder="输入姓名"/>
<br />
手机号<input type="text" name="userphone" v-model="userphone" placeholder="输入手机号" />
<br />
<input type="submit" value="跳转" />
</form>
<script>
export default {
data(){
return {
username:'',
userphone:'',
userbuild:'',
userroom:'',
result_data:{
name:''
}
}
},
methods:{
onSearch:function(e){
var self=this;
this.$http.get('url',{
username:self.username,
userphone:self.userphone,
}).then(function (response) {
//有两个input,我想实现如下功能:
1.提交时,如果只输入一个input,跳转A路由
2.提交时,如果2个input都输入了,跳转B路由
3.提交时,如果1个input都没输入,跳转C路由
}, function (response) {
// error callback
});
}
}
}
</script>
判断输入不是很简单的事吗,还是说你不知道 router.go(path)
这个方法。
<div class="condition_router">
<div class="hd">
<h1 class="page_title">Vue</h1>
<p class="page_desc">根据条件跳转不同路由</p>
</div>
<div class="bd">
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_hd"><label class="weui_label">姓名</label></div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="text" placeholder="请输入姓名" v-model="userName"/>
</div>
</div>
<div class="weui_cell">
<div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="number" pattern="[0-9]*" placeholder="请输入手机号" v-model="userPhone"/>
</div>
</div>
</div>
<div class="weui_btn_area">
<a class="weui_btn weui_btn_primary" id="showTooltips" @click="linkFun">跳转</a>
</div>
</div>
</div>
export default{
data(){
return{
userName:'',
userPhone:''
}
},
methods:{
linkFun(){
let userName=this.userName.trim();
let userPhone=this.userPhone.trim();
if(userName!==''&&userPhone===''){
router.go({
path:'路径1',
activeClass:'active'
});
}else if(userName===''&&userPhone===''){
router.go({
path:'路径2',
activeClass:'active'
});
}else {
router.go({
path:'路径3',
activeClass:'active'
});
}
}
}
}
根据不同的情况跳转到不同的位置,你可以再结合表单提交修改下