Question

我在Registration.vue组件中。该组件包含注册表单，包含电子邮件，密码等字段。我想感谢用户成功注册（指示他应该去检查电子邮件）。这样做的最佳解决方案是什么？

我在考虑：

使用this.$router.push或this.$router.replace重定向到第二个组件，但这会更改网址，当有人在没有注册的情况下访问此网址时，他会看到他应该检查电子邮件的消息......
在注册动作成功时将当前组件替换为其他组件，但我不知道如何执行此操作（不更改URL，并且代码良好）。
使用<component v-bind:is="currentView">，但我不确定这是否是最佳解决方案。我需要制作三个文件（对于父组件，使用：is，for form和for thanks）。此外，我需要从注册进行良好的孩子发出事件，但另一方面，我应该解雇vuex注册行动，不要期待响应（见下一个序列）

另一件事是我们不应该等待vuex行动完成，但我需要知道注册是否进展顺利 - https://github.com/vuejs/vuex/issues/46#issuecomment-174539828

我正在使用vue.js 2，vue-router，vuex

由于

Answer 1

您可以使用Sweet Alert之类的内容来显示成功或错误对话框。它支持Ajax requests，因此您可以在处理时显示“您的注册正在处理，请检查您的电子邮件”消息。

Answer 2

当用户成功注册然后重定向到登录页面时，第一种方法是合适的。

现在问题如何检查用户是否输入了必填字段？因此，形式验证。您可以使用vee-validate插件，它非常适合所有项目。我正在使用它，它有很多可用的验证。

通过这些UI验证，成功传递后，只会触发提交操作，否则将提示用户输入必填字段。

您可以在此处查看基本示例 - http://vee-validate.logaretm.com/index.html#basic-example

执行操作时，

 ///main.js
 ...
 Vue.use(VeeValidate)
 ...


 // register.vue
 this.$validator.validateAll().then((result) => {

    if (result) {
       //done
       this.$router.replace( '/login' );
    }
    else{
        // throw error
    }

这很简单。如果您想在表单上进行UI验证，请尝试使用此方法。

Vue更改组件而不更改URL

2 个答案: