问题背景

在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined。

如下图所示,我们有一个 login 方法,希望在登录成功之后路由到主页,但通过 this.$router 获取路由器出错。

解决方案

使用箭头函数替代普通函数,ES6中的箭头函数 “=>” 内部的 this 属于词法作用域,由上下文确定(也就是由外层调用者vue来确定)。

改成如下图所示,我们看到 this.router 已经正确的返回了路由器对象。

so, 遇到类似问题的朋友们,箭头函数用起来。


作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/
版权所有,欢迎转载,转载请注明原文作者及出处。

Vue笔记:使用 axios 中 this 指向问题的更多相关文章

  1. vue使用axios中 this 指向问题

    1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...

  2. vue在axios中 this 指向问题

    1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...

  3. vue笔记(更新中)

    1.禁止div点击 2.禁止选择 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; - ...

  4. vue中使用Ajax(axios)、vue函数中this指向问题

    Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求.Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios中文文档库:http ...

  5. axios中的this指向问题

    最近在使用vue过程中,使用axios进行接口请求,确发现取不到值,返回为undefined. show (item) { let searchText = item.keyword console. ...

  6. Vue笔记:使用 axios 发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

  7. Vue+Typescript中在Vue上挂载axios使用时报错

    Vue+Typescript中在Vue上挂载axios使用时报错 在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.t ...

  8. 一个后端开发的 Vue 笔记【入门级】

    一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...

  9. 《Vue笔记01: 我与唐金州二三事》

    最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...

随机推荐

  1. awk、grep、sed是linux操作文本的三大利器,也是必须掌握的linux命令之一

    awk.grep.sed是linux操作文本的三大利器,也是必须掌握的linux命令之一.三者的功能都是处理文本,但侧重点各不相同,其中属awk功能最强大,但也最复杂.grep更适合单纯的查找或匹配文 ...

  2. maven常用仓库

    ==================2014-04-19添加========可访问=============================== http://nexus.openkoala.org/ ...

  3. 【学习】Linux Shell脚本编程

    1.脚本的组成和执行 Linux shell脚本的结构并不复杂,其主要由变量.内部命令以及shell的语法结构和一些函数.其他命令行的程序等组成,以下是一个简单的shell脚本. #!/bin/bas ...

  4. CVE-2018-8120 分析

    目录 CVE-2018-8120 分析 1.实验环境 1.1.操作系统 1.2.用到的分析工具 2.假如 2.1.我想提权 2.2. 有一个处于内核空间,极少被调用的函数 2.3.R3任意修改R0地址 ...

  5. LeetCode算法题-Fibonacci Number(Java实现)

    这是悦乐书的第250次更新,第263篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第117题(顺位题号是509).Fibonacci数字,通常表示为F(n),形成一个称为 ...

  6. 我的第一个python web开发框架(29)——定制ORM(五)

    接下来我们要封装的是修改记录模块. 先上产品信息编辑接口代码 @put('/api/product/<id:int>/') def callback(id): ""&q ...

  7. 用微软官方的 HTML Help Workshop制作的CHM文件不显示图片解决办法

    制作CHM文档,方便小巧还易于查看,用处自不必多说了,最近想把这个季度所学习的内容全部制作成CHM格式文档,给自己后续用来温故而知新,同时也可以做为后起之秀避坑法宝.但是在生成CHM文档之后发现有些地 ...

  8. RabbitMQ持久化

    我们知道,如果消息接收端挂了,消息会保存在队列里.下次接收端启动就会接收到消息. 如果RabbitMQ挂了怎么办呢?这时候需要将消息持久化到硬盘 消息发送端:producer ........... ...

  9. 平滑升级你的Nginx

    1.概述(可以直接跳过看第2部分) Nginx方便地帮助我们实现了平滑升级.其原理简单概括,就是: (1)在不停掉老进程的情况下,启动新进程. (2)老进程负责处理仍然没有处理完的请求,但不再接受处理 ...

  10. python之面相对象程序设计

    一 面向对象的程序设计的由来 面向对象设计的由来见概述:http://www.cnblogs.com/linhaifeng/articles/6428835.html 面向对象的程序设计:路飞学院版 ...