当 router:id 参数更改时 Nuxt 刷新路由器视图

Question

我的 Nuxt 应用程序加载了一个链接，它是http://127.0.0.1/user/:id路线上的子视图。 我将用户的 API 调用放在路由器视图的mounted挂钩中。

如果路由id改变，mounted 不再触发，因为子视图已经加载。 我最终得到了解决方案 - 观察 $route.params.id 并将 API 调用从 mount 移动到这个观察者。

  watch: {
    $route() {
      this.getRows()
    }
  }

有一个更好的方法吗？

Answer 1

解决方案 1

当route更改为<nuxt-child>定义:key时强制重新加载，如下所示：

<nuxt-child :key="$route.fullPath"></nuxt-child>

---

解决方案 2

将 API 调用以将watch中的用户加载到来自 URL 的id而不是mounted ，您可以使用immediate: true在第一次加载时调用它。

export default {
  data() {
    return {
        user: null
    }
  },
  asyncData({ params }) {
    return {
      id: params.id
    }
  },
  watch: {
    id: {
      immediate: true,
      handler(id) {
        //Call the API to get the user using the id
      }
    }
  }
}