Question

我已经为我的vue-router使用了以下代码：

{ 
   path: '/templates/:id/items/:itemId', component: Item,
   name: 'item'
},

在item对象上，我有一个计算属性templateId：

templateId() {
   return parseInt(this.$route.params.id, 10);
},

我遇到的问题是，每次我向URL添加锚点（单击链接，在item组件内部）时，即使组件不变，该属性也会重新计算。 / p>

这意味着将重新计算所有取决于templateId的计算属性。

但是templateId值完全不变。

这是一个非常简单的jsfiddle来解释问题：

https://jsfiddle.net/1Lgfn9qh/1/

如果删除watch属性（从未调用），则控制台中将不再记录任何内容。

您能解释一下这里发生了什么吗？为什么即使没有值更新也要重新计算计算出的属性？我该如何避免呢？

Answer 1

导致此行为的原因是route对象在Vue中是不可变的。任何成功的导航都将导致一个全新的路由对象，从而触发所有计算和监视属性的重新计算。有关更多详细信息，请参见https://router.vuejs.org/api/#the-route-object。

要解决此问题，您可以watch路由对象并在那里为您过滤相关或不相关的更改

watch: {
  '$route' (to, from) {
    if(to.path != from.path) { // <- you may need to change this according to your needs!
      this.relevantRoute = to
    }
  }
}

然后在您的计算和/或监视属性中引用手动设置的变量

templateId() {
  return parseInt(this.relevantRoute.params.id, 10);
},

Vue路由器和VueJS反应性

1 个答案: