Javascript 使用新查询推送同一路由时创建的钩子不再运行

我有一个组件，其中创建了一个钩子，如下所示：

created（）{
if（this.$route.query.q）{
//获取数据
}
}

---

但是，在同一个组件中，我尝试执行

$router.push（`q=${search}`）

和URL更改，但创建的钩子不会重新运行。

Vue将重用该组件（如果您重新路由到它），因此创建的

不会再次运行。您可以使用
上的键强制执行此操作：



或者使用
beforeRouteUpdate
hook：

路由更新之前（到、从、下一个）{
if（this.$route.query.q）{
//获取数据
}
next（）；
}

此钩子在组件首次创建时不会运行，因此使用此解决方案，您可能需要同时使用

created

和

beforeUpdate

一些差异：

使用密钥解决方案，组件不会被缓存，因此它将在每个路由上重新创建（这是导致每次运行创建的

的原因）。如果您只需要在创建过程中执行一次操作，例如不管查询如何，只调用一次api，那么您可能不希望这样做。或者在极少数情况下，可能会对重新创建产生性能影响（可能不会）

使用beforeRouteUpdate

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

---

只要您理解其中的差异，就可以使用您喜欢的/更有意义的组件。

如果您重新路由到组件，Vue将重用该组件，因此创建的

不会再次运行。您可以使用
上的键强制执行此操作：



或者使用
beforeRouteUpdate
hook：

路由更新之前（到、从、下一个）{
if（this.$route.query.q）{
//获取数据
}
next（）；
}

此钩子在组件首次创建时不会运行，因此使用此解决方案，您可能需要同时使用

created

和

beforeUpdate

一些差异：

使用密钥解决方案，组件不会被缓存，因此它将在每个路由上重新创建（这是导致每次运行创建的

的原因）。如果您只需要在创建过程中执行一次操作，例如不管查询如何，只调用一次api，那么您可能不希望这样做。或者在极少数情况下，可能会对重新创建产生性能影响（可能不会）

使用beforeRouteUpdate

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

---

选择你喜欢/更有意义的选项，只要您了解差异。

尝试$route.replace您需要将密钥绑定到

路由器链接

标记，并在每次重新呈现当前组件时更新该密钥尝试$route.replace您需要将密钥绑定到

路由器链接

标记，并在每次重新呈现当前组件时更新该密钥