How to watch on Route changes with Nuxt and asyncData

在使用Nuxt.js进行服务端渲染的应用中，我们经常需要在组件或页面级别处理异步数据。asyncData 方法是 Nuxt.js 提供的一个特殊的钩子函数，它允许在设置组件的数据之前异步获取或处理数据。asyncData 方法会在每次加载组件之前被调用，它的一个常见用途就是根据路由的变化来获取数据。

如何监视路由更改：

在 Nuxt.js 中，如果您需要在路由改变时重新调用 asyncData 来更新页面数据，您可以利用 Nuxt.js 的 watchQuery 参数。watchQuery 是一个布尔值或数组，它使您能够指定哪些查询参数应该触发 asyncData 方法的重新调用。

示例：

假设您有一个新闻列表的页面，该页面依赖于 URL 中的 page 查询参数。每当用户更改页码时，您希望重新获取新闻数据。这可以通过设置 watchQuery 来实现。

javascript
export default {
  watchQuery: ['page'],

  async asyncData({ query, $axios }) {
    const page = query.page || 1;
    try {
      const { data } = await $axios.get(`https://api.example.com/news?page=${page}`);
      return { news: data.news };
    } catch (error) {
      return { news: [] };
    }
  },

  data() {
    return {
      news: []
    };
  }
}

详细说明：

1. watchQuery: 在这个例子中，我们将 watchQuery 设置为监听 page 查询参数。这意味着每当 URL 中的 page 参数发生变化时，asyncData 方法会被重新调用。

2. asyncData 方法: 这个方法接收一个上下文对象，其中包含了 query 参数。我们从 query 中获取当前的页码，并用它来请求对应页码的新闻数据。

3. $axios: 在示例中，我们使用了 $axios 模块来发送 HTTP 请求。这是 Nuxt.js 中常用的进行 HTTP 请求的方式，它基于 axios 库。

4. 错误处理: 在请求数据时，我们使用了 try...catch 结构来处理可能出现的错误。如果请求失败，我们将新闻数组设置为空。

使用 watchQuery 可以有效响应路由查询参数的变化，使得我们的应用能够更加灵活和响应用户的交互。这对于创建动态更新的应用非常有用，尤其是在处理分页、筛选或搜索功能时。