Vue中setTimeout内调用$router.push出现Cannot read property 'push' of undefined问题

你遇到的这个问题其实是JavaScript里this指向的经典坑！在setTimeout的普通function回调里，this并不会指向你的Vue组件实例，而是绑定到了全局对象（浏览器环境下就是window），所以才会出现Cannot read property 'push' of undefined的错误——因为window对象上根本没有$router嘛。

下面给你三种简单的解决办法，任选一种都能搞定：

方法一：使用箭头函数（最推荐） #

箭头函数不会创建自己的this，它会继承外层作用域的this，也就是你的Vue组件实例：

// 显示提示信息
this.messages = true
// 等待100毫秒后跳转
setTimeout(() => {
    this.$router.push({ path: `/photos/${ this.photo.id }` });
}, 100);

方法二：提前保存组件实例的this #

在setTimeout外部把组件的this存到一个变量里，比如self或者that，然后在回调里用这个变量：

// 显示提示信息
this.messages = true
// 保存组件实例的this
const self = this
setTimeout(function(){
    self.$router.push({ path: `/photos/${ self.photo.id }` });
}, 100);

方法三：用bind绑定this #

通过bind方法把回调函数的this强制绑定到组件实例上：

// 显示提示信息
this.messages = true
setTimeout(function(){
    this.$router.push({ path: `/photos/${ this.photo.id }` });
}.bind(this), 100);

这三种方法里，箭头函数是Vue项目中最常用的写法，代码更简洁也更符合现代JavaScript的习惯~

内容的提问来源于stack exchange，提问作者Parvej Ahammad