Vue Router：HTML5 Canvas 图像链接不会路由到正确的 URL

【问题标题】：Vue Router: HTML5 Canvas image links won't route to the right URLVue Router：HTML5 Canvas 图像链接不会路由到正确的 URL
【发布时间】：2017-10-24 03:10:33
【问题描述】：

我正在尝试将 html5 画布上的图像链接到 url 以浏览网站。

我使用Vue，FabricJS 用于画布，Vue-router 用于路由。

let computerClick = function (evt) {
  console.log("Computer clicked");
  this.$router.push('/app');
};

当在画布上单击该项目时，它会运行此功能，但出现此错误：

未捕获的类型错误：无法读取未定义的属性“推送”

谁能指引我正确的方向？

【问题讨论】：

您的示例代码是否在 vue 实例中？
是的，它在一个 vue 组件中

标签： javascript canvas vue.js fabricjs vue-router

【解决方案1】：

因为您以这种方式定义函数，所以 computerClick 函数内的 this 不是指 Vue 实例，因此是 undefined。

不确定您的示例代码的整体上下文是什么，但重构您的代码以不定义这样的函数可能是最有意义的。我可能会将computerClick 设为组件方法（您可以通过this.computerClick() 调用它：

methods: {
  computerClick() {
    console.log("Computer clicked");
    this.$router.push('/app');
  }
}

话虽如此，你也可以像这样将当前的 Vue 实例绑定到函数：

let computerClick = (function (evt) {
  console.log("Computer clicked");
  this.$router.push('/app');
}).bind(this);

【讨论】：

这让它工作了！我猜是 .bind(this);成功了！谢谢！