Javascript 如何在Vue中提交表单，重定向到新路由并传递参数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49599274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to submit a form in Vue, redirect to a new route and pass the parameters?
提问by Chris
I am using Nuxt and Vue and I am trying to submit a form, redirect the user to a new route including the submitted params, send an API request to get some data and then render that data.
我正在使用 Nuxt 和 Vue，我正在尝试提交一个表单，将用户重定向到包含提交的参数的新路由，发送 API 请求以获取一些数据，然后呈现该数据。
I achieved this by simply setting the form action to the new path and manually adding all the URL parameters to the API request.
我通过简单地将表单操作设置为新路径并手动将所有 URL 参数添加到 API 请求来实现这一点。
First I create a simple form with the route /search.
首先，我使用 route 创建了一个简单的表单/search。
<form action="/search">
<input type="text" name="foobar">
<button type="submit">Submit</button>
</form>
When submitting the form the user leaves the current page and gets redirected to the new page. The URL would now look like this: http://www.example.com/search?foobar=test. Now I fetch the foobarparameter by using this.$route.query.foobarand send it to my API.
当提交表单时，用户离开当前页面并被重定向到新页面。该URL现在看起来是这样的：http://www.example.com/search?foobar=test。现在我foobar通过使用获取参数this.$route.query.foobar并将其发送到我的 API。
However the problem in my approach is when submitting the form the user leaves the current page and a new page load will occur. This is not what we want when building progressive web apps.
但是，我的方法中的问题是，当提交表单时，用户会离开当前页面并且会发生新的页面加载。在构建渐进式 Web 应用程序时，这不是我们想要的。
So my question is how can I submit a form in Nuxt/Vue and redirect to a new route including the submitted parameters?
所以我的问题是如何在 Nuxt/Vue 中提交表单并重定向到包含提交参数的新路由？
回答by divine
The default behavior of <form>is to reload the page onsubmit. When implementing SPA's it would be better to avoid invoking default behavior of <form>.
的默认行为<form>是重新加载页面onsubmit。在实现 SPA 时，最好避免调用<form>.
Making use of router modulewhich is available out-of-box in nuxtjs will enable all the redirection controls to flow within the application. if we try to trigger events available via <form>then browser reload will occur. This has to be avoided.
使用router module在 nuxtjs 中开箱即用的功能将使所有重定向控件都能在应用程序中流动。如果我们尝试触发可用的事件，<form>则浏览器会重新加载。这是必须避免的。
So my question is how can I submit a form in Nuxt/Vue and redirect to a new route including the submitted parameters?
所以我的问题是如何在 Nuxt/Vue 中提交表单并重定向到包含提交参数的新路由？
You can try below approach
您可以尝试以下方法
First
第一的
Use .stop.preventmodifiers to prevent the submit button from invoking default <form>behavior. This is similar to using event.stopPropagation();and event.preventDefault();in jQuery
使用.stop.prevent修饰符来防止提交按钮调用默认<form>行为。这类似于在 jQuery 中使用event.stopPropagation();和event.preventDefault();
<form>
<input type="text" name="foobar" v-model="foobar">
<button type="submit" @click.stop.prevent="submit()">Submit</button>
</form>
Then
然后
Create
创建
vue model object
foobarvue method
submit
vue 模型对象
foobar方法
submit
Use this.$router.pushto redirect to next page. This will enable the control flow to stay inside the SPA. if you want to send any data into server then you can do it before invoking this.$router.pushelse you can redirect and continue your logic.
使用this.$router.push重定向到下一个页面。这将使控制流保持在 SPA 内。如果您想将任何数据发送到服务器，那么您可以在调用之前完成它，this.$router.push否则您可以重定向并继续您的逻辑。
export default {
data(){
return {
foobar : null
}
},
methods: {
submit(){
//if you want to send any data into server before redirection then you can do it here
this.$router.push("/search?"+this.foobar);
}
}
}
回答by hamid keyhani
just add this: @submit.prevent="false"
只需添加：@submit.prevent="false"
<form @submit.prevent="false">
<div class="form-group">
</div>
</form>
i hope this be useful for u :)
我希望这对你有用:)
