当使用新查询推送相同的路由时，创建的钩子不再运行答案

【问题标题】：Created hook not running again when pushing the same route with a new query当使用新查询推送相同的路由时，创建的钩子不再运行
【发布时间】：2021-01-24 15:43:55
【问题描述】：

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

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

但是在同一个组件中，我尝试执行 $router.push(`?q=${search}`) 并且 URL 发生了变化，但创建的挂钩不会重新运行。

【问题讨论】：

试试 $route.replace
您需要将一个键绑定到您的 router-link 标记，并在每次要重新渲染当前组件时更新它

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案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 个生命周期挂钩中使用相同的逻辑，但这并不是真正的问题。您还可以从此挂钩重新路由，这可能很有用。

只要您了解其中的差异，请使用您喜欢/更有意义的任何一个。

【讨论】：