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

【问题标题】：Nuxt refresh router view when router :id parameter changes当路由器：id 参数更改时 Nuxt 刷新路由器视图
【发布时间】：2019-11-20 11:49:55
【问题描述】：

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

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

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

有没有更好的方法来做到这一点？

【问题讨论】：

标签： vue.js vue-router nuxt.js

【解决方案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
      }
    }
  }
}

【讨论】：

是的，这行得通，谢谢。缺点是整个视图都被刷新了，包括视图转换和所有内容。
是的，你说得对！我刚刚在答案中添加了另一个解决方案来避免这种情况。