Vue 路由器：HTML5 Canvas 图片链接不会路由到右侧 URL

Question

我正在尝试将 html5 canvas 上的 link 图片传送到 url 以浏览网站。

我正在使用 Vue，FabricJS 用于 canvas，Vue-router 用于路由。

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

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

Uncaught TypeError: Cannot read property 'push' of undefined

谁能指引我正确的方向？

Answer 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);

Vue Router: HTML5 Canvas image links won't route to the right URL