如何使用 vue Router 验证表单并转到下一页

Question

验证后的表单必须使用此代码通过 vue-Router 转到下一个作者页面，但不能验证

  <form @submit.prevent="validate">

            <div class="row">
              

                <div class="col-md-4 mb-3">
                    <label>Name</label>
                    <input type="search" class="form-control" placeholder="" v-model.lazy.trim="form.nameTitle">
                    <div class=" text-danger">
                        {{ form.titleNameErrorText }}
                    </div>
                </div>
               

            <div class="row mt-4">
                <div class="col-6 ">
                    <button class="btn btn-primary btn-style" type="submit" @click.stop.prevent="submit()">Submit
                        </button>
                </div>

            </div>
        </form>

js代码和vue路由器在验证后处理下一页

<script>
import { reactive } from "vue";
import { useRoute, useRouter } from 'vue-router'
export default {
    setup() {
        const router = useRouter();
        const form = reactive({
            nameTitle: "", 
            titleNameErrorText: "",
            name: "FormAddress",

        });

        function validate() {

            if (form.nameTitle.length < 3) {
                form.titleNameErrorText = "Number is 3 More..   "
            }
            else {
                form.titleNameErrorText = ""
            }
        }

        function submit() {
        
            router.push('/MapView')
            
        }
        return { form, validate,submit }
    },

}

</script>

提交转到地图页面，不验证当前页面，我处理验证页面并成功表单元素下一页，否则保留此页面

Answer 1

如果你想保持状态，你可以使用

<keep-alive></keep-alive>

。
如果你想执行

submit

功能，你可以使用

return

。并且你可以检查 url 与

useRoute

进行比较来检查当前页面。