vue.js的条件跳转问题

Question

下面是原代码,问题写在代码中的注释里了:

            <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>

Answer 1

判断输入不是很简单的事吗，还是说你不知道 router.go(path) 这个方法。

Answer 2

<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'
                    });
                }
            }
        }
    }

根据不同的情况跳转到不同的位置，你可以再结合表单提交修改下