解决vue.js this.$router.push无效的问题


Posted in Javascript onSeptember 03, 2018

如下所示:

login() {
  if(this.email.length > 0 && this.password.length >0) {
   this.$http.post('/api/login', {
    user: this.email,
    password: this.password
   })
   .then(res => {
    let userPwd = res.data
    if(this.password == userPwd) {
     this.$router.push("/")
    } else {
     alert("错误,请重新输入!")
    }
   })
   .catch(err => {
    console.log(err)
   })
  } else {
   alert("输入错误!")
  }
  }

this.$router.push(“/”)不是跳转到主页,而是变成这样:http://127.0.0.1:8080/login?email=yejia%40qq.com&password=123456,请问哪里错啦?

解决方案1:

有没有可能是已经跳转了,但是主页判断成了没有登录,然后又跳回来了。

解决方案2:

你这里的 this指向已经不是 vue 的对象啦,可以这么改

login() {
 const self = this;
 if(this.email.length > 0 && this.password.length >0) {
  this.$http.post('/api/login', {
   user: this.email,
   password: this.password
  })
  .then(res => {
   let userPwd = res.data
   if(this.password == userPwd) {
    self.$router.push("/")
   } else {
    alert("错误,请重新输入!")
   }
  })
  .catch(err => {
   console.log(err)
  })
 } else {
  alert("输入错误!")
 }
 }

以上这篇解决vue.js this.$router.push无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 #Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 #Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 #Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 #Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 #Javascript
Angular5中状态管理的实现
Sep 03 #Javascript
You might like
用文本文件制作留言板提示(下)
2006/10/09 PHP
PHP 第一节 php简介
2012/04/28 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
优化javascript的执行速度
2010/01/23 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
模范家庭事迹材料
2014/02/10 职场文书
青年志愿者活动总结
2014/04/26 职场文书
苏州园林导游词
2015/02/03 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android