Vue更改组件而不更改URL答案

【问题标题】：Vue changing the component without URL changesVue更改组件而不更改URL
【发布时间】：2018-08-24 02:10:34
【问题描述】：

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

我在想：

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

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

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

谢谢

【问题讨论】：

标签： vue.js vue-component vue-router vuex

【解决方案1】：

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

现在问题如何检查用户是否输入了必填字段？所以有表单验证。您可以使用 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 验证，请尝试这种方法。

【讨论】：

【解决方案2】：

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

【讨论】：