使用新查询推送相同路由时再次创建挂钩而不是运行

Question

我有一个组件创建了这样的钩子：

created() {
    if (this.$route.query.q) {
        //fetchdata
    }
}

然而，在同一个组件中，我尝试执行 $router.push(`?q=${search}`) 和 URL 更改，但创建的挂钩不会重新运行。

Answer 1

如果您重新路由到该组件，Vue 将重用该组件，因此 created 不会再次运行。您可以使用 <router-view>:

上的键强制它这样做

<router-view :key="$route.fullPath" />

或使用 beforeRouteUpdate 挂钩：

beforeRouteUpdate(to, from, next) {
  if (this.$route.query.q) {
    //fetchdata
  }
  next();
}

首次创建组件时，此挂钩不会运行，因此对于此解决方案，您可能需要同时使用 created 和 beforeRouteUpdate。

一些差异：

使用关键解决方案，组件将不会被缓存，因此它将在每个路由上重新创建（这就是导致每次 created 到运行的原因）。如果您只需要在创建时执行一次操作，例如无论查询如何，只调用一次 api，您可能不希望这样做。或者在极少数情况下，重新创建可能会对性能产生影响（可能不会）。

对于 beforeRouteUpdate，您可能必须在 2 个生命周期挂钩中使用相同的逻辑，但这并不是真正的问题。您也可以从此挂钩重新路由，这可能很有用。

使用你喜欢的/更有意义的，只要你理解其中的区别。

Created hook not running again when pushing the same route with a new query