时间戳

首页 > 解决方案 > 当路由器：id 参数更改时 Nuxt 刷新路由器视图

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

问题描述

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

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

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

有一个更好的方法吗？

标签： vue.jsvue-routernuxt.js

解决方案

解决方案 1

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

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

解决方案 2

将 API 调用加载watch到id来自 URL 的用户而不是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
      }
    }
  }
}

推荐阅读