vuejs 如何实现表单提交后跳转到指定页面 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
刚刚学习vuejs框架，前后端分离，后端提供rest接口。之前没分离的时候页面A表单post数据到rest接口127.0.0.1/API/a, 后台处理(用的express框架，router.get(127.0.0.1/API/a ········))然后一个res.redirect 就可以跳转到提示操作成功的页面，但是前后端分离之后页面A表单post数据到rest接口之后后台就不应该再res.redirect 来实现跳转到成功提示页面了吧？是不是应该在前端vuejs实现把表单提交到后台resut 接口 然后跳转到成功提示页面？ 那应该如何实现呢？ 表单的action 写的是rest接口127.0.0.1/API/a，但是提交成功页面地址肯定不是127.0.0.1/API/a啊
希望大家的帮助，提供提供思路或者例子，谢谢！
&form v-if=&!$store.state.authUser& @submit.prevent=&login&&
&p class=&error& v-if=&formError&&{{ formError }}&/p&
&p&&i&To login, use &b&demo&/b& as username and &b&demo&/b& as password.&/i&&/p&
&p&Username: &input type=&text& v-model=&formUsername& name=&username& required=&required&/&&/p&
&p&Password: &input type=&password& v-model=&formPassword& name=&password& required=&required&/&&/p&
&p&Captcha: &input type=&number& v-model=&formCaptcha& name=&captcha& autocomplete=&off& required=&required&/&&/p&
&p v-if=&captcha& v-html=&captcha& v-on:click=&refresh&&&/p&
&button type=&submit&&Login&/button&
&/form&
methods: {
login () {
this.$store.dispatch('login', {
username: this.formUsername,
password: this.formPassword,
captcha: this.formCaptcha
.then(() =& {
this.formUsername = '';
this.formPassword = '';
this.formCaptcha = '';
this.formError =
self.$router.replace({ path: 'admin' })
// window.location.href 也是可以的 看你有没有用vue-router
.catch((e) =& {
this.formError = e.message
actions: {
login ({ commit }, { username, password, captcha }) {
return axios.post('/api/login', {
.then((res) =& {
commit('SET_USER', res.data)
.catch((error) =& {
if (error.response.status === 401) {
throw new Error(error.response.data.error)
当然，你不用vuex的话，发请求直接写在methods里面就可以了
谢谢您的例子，没用vuex, .prevent=“login” 中用vue-router 发送请求， 但是我表单里面的数据要如何发送到/API/a呢 是要自己在/API/a 后面添加查询参数吗 比如表单有数据data1,data2,data3, 我需要在输入框input里面绑定我vue里面的data字段，然后把请求地址改成/API/a?data1=data1&data2=data2&data3=data3 吗 ？
但是我有20多个输入字段，这样有点麻烦，有别的方法吗
多谢多谢！！
methods: {
this.$http.post('/API/a')
.then(function (response) {
if (response.status == 200) {
this.$router.replace({ path: '/PageB'})
自己回复一下， 1楼方法的思路，获取表单数据直接用jquery就好， $(&#formid&).serialize() 获取后可以直接添加到url后面或者其他方法，获取表单数据也可以用DataForm，API介绍见https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData 但是浏览器的兼容性需要考虑
有更好的方式欢迎大家留言，暂时结贴
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的Vue.js如何优雅的进行form validation？ - 知乎174被浏览41274分享邀请回答02 条评论分享收藏感谢收起学习vue.js表单控件绑定操作_javascript技巧
作者：用户
本文讲的是学习vue.js表单控件绑定操作_javascript技巧，
本文实例为大家分享了vue.js表单控件绑定的具体代码，供大家参考，具体内容如下
&!DOCTYPE html&
&html lang=&en&&
本文实例为大家分享了vue.js表单控件绑定的具体代码，供大家参考，具体内容如下
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&表单控件绑定&/title&
&!-- v-model在表单控件元素上实现数据的双向绑定 --&
&div id="app-1"&
&input type="text" v-model="message" placeholder="请输入"&
&p&{{message}}&/p&
&!-- 单个勾选框 --&
&div id="app-2"&
&input type="checkbox" id="checkbox" v-model="checked"&
&label for="checkbox"&{{ checked }}&/label&
&!-- 多个勾选框绑定到同一数组 --&
&div id="app-3"&
&input type="checkbox" id="checkboxjack" v-model="checkedNames" value="Jack"&
&label for="checkboxjack"&Jack&/label&
&input type="checkbox" id="checkboxJohn" v-model="checkedNames" value="John"&
&label for="checkboxJohn"&John&/label&
&input type="checkbox" id="checkboxMike" v-model="checkedNames" value="Mike"&
&label for="checkboxMike"&Mike&/label&
&span&我是{{checkedNames}}&/span&
&!-- 单选框 --&
&div id="app-4"&
&input type="radio" id="man" value="man" v-model="sex"&
&label for="man"&man&/label&
&input type="radio" id="woman" value="woman" v-model="sex"&
&label for="woman"&woman&/label&
&span&选择的时是{{sex}}&/span&
&!-- 单选 --&
&div id="app-5"&
&select v-model="selected"&
&option&A&/option&
&option&B&/option&
&option&C&/option&
&span&我是{{selected}}&/span&
&!-- 多选列表 绑定到数组--&
&div id="app-6"&
&select v-model='selected' multiple&
&option&A&/option&
&option&B&/option&
&option&C&/option&
&span&我选择了{{selected}}&/span&
&!-- 动态选项用v-for渲染 通过v-bind绑定value--&
&div id="app-7"&
&select v-model='selected'&
&option v-for="item in items" v-bind:value="item.value"&
{{item.text}}
&!-- v-model后的selected必须出现在data中 --&
&span&选择的是{{selected}}&/span&
&!-- 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步： --&
&!-- 在 "change" 而不是 "input" 事件中更新 --&
&input v-model.lazy="msg" &
&!-- 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值： --&
&input v-model.number="age" type="number"&
&!-- 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。.trim如果要自动过滤用户输入的首尾空格，可以添加.trim 修饰符到 v-model 上过滤输入： --&
&input v-model.trim="msg"&
&script src="js/vue.js"&&/script&
&script src="js/vuetext.js"&&/script&
var app1=new Vue({
el:'#app-1',
message:'开始'
var app2=new Vue({
el:'#app-2',
checked:false
var app3=new Vue({
el:'#app-3',
checkedNames:[]
var app4=new Vue({
el:'#app-4',
var app5=new Vue({
el:'#app-5',
selected:''
var app6=new Vue({
el:'#app-6',
selected:[]
var app7=new Vue({
el:'#app-7',
selected: 'A',
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持云栖社区。
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索vue.js表单控件
vue.js控件绑定
，以便于您获取更多的相关知识。
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区()为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！1867人阅读
Vue.js（83）
资料来于官方文档：
http://cn.vuejs.org/guide/forms.html
本文是在官方文档的基础上，更加细致的说明，代码更多更全。
简单来说，更适合新手阅读
（二十三）表单绑定
①常见绑定方法：
【1】文本输入框绑定；
【2】textarea绑定（类似【1】）；
【3】radio选中值绑定；
【4】checkbox绑定（自动捆绑数组，无需name）；
【5】select绑定；
【6】select multiple多选选中框绑定；
【7】动态绑定（以上不同类型但同一个值可以互动）；
【8】checkbox选中和未选中赋予不同的值（主要是针对不选中状态）；
【9】checkbox，radio，select选中状态的值动态绑定（主要是指值动态绑定对象或者是vm实例的属性，例如data里的某个属性，或者是computed的某个值）；
[javascript]&&
②添加参数：
非实时更新，而是focus状态结束后更新
将值自动转为number类型输出
延迟若干毫秒再更新数值
在取消focus状态后才更新值，而不是按键按下时就更新值。
对文本输入框和textarea都有效
[javascript]&&
【2】number
将输入的值自动转为number类型，如果转后为NaN类型，则返回原值；
如果加上number这个参数，那么输入数字时，则提示类型为string，加上之后，纯数字会提示number类型；
【3】debounce=”毫秒数”
当值连续若干毫秒没有变化时，触发变量的值的改变；
当我以500ms的时间差依次输入1,2,3,4,5,6这六个数字时，text的值不会被更新；
当我停止输入有1000ms时，text值才会被更新；
因此，适合类似ajax等高消耗操作。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1852512次
积分：20530
积分：20530
排名：第408名
原创：117篇
转载：1777篇
评论：88条
(1)(109)(98)(101)(99)(137)(209)(392)(324)(117)(150)(5)(25)(88)(86)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'}