如何使用 Nuxt 和 asyncData 观察路由变化

Posted 2023-02-22

【中文标题】如何使用 Nuxt 和 asyncData 观察路由变化

【英文标题】：How to watch on Route changes with Nuxt and asyncData

【发布时间】：2019-03-23 06:53:46

【问题描述】：

大家好，我正在尝试查看我的 nuxt js 应用程序中的路线变化。

这是我的中间件：

    export default function ( route ) 
  return route; but i don't know what to write here

index.vue 文件

  middleware: [routeReact]

我正在尝试写这个：

app.context.route = route

但它告诉我 app.context 不存在

这是我的问题的重点，如果路线发生变化，我正在尝试使用页面上的 axios 更新从我的 api 获取的数据 像这样

这个页面

我正在点击下一页的链接：

但是当我转到下一页时，没有任何反应，所有数据都是相同的：

这里是我的 asyncData 代码：

asyncData( app ) 
return app.$axios.$get('apps/' + app.context.route.fullPath.replace(/\/categories\/?/, ''))
.then(res => 
  return 
    info: res.results,
    nextPage: res.next,
    prevPage: res.prev
    ;
  )

感谢您的帮助

【参考方案1】：

首先，context.route 或它的别名 this.$route 是不可变对象，不应被赋值。

相反，我们应该使用this.$router，它是methods for programmatic navigation 或<nuxt-link> 和<router-link>。

据我了解，您需要渲染相同的路线，但触发 asyncData 钩子以更新组件的数据。仅更改了路由查询。

导航到同一页面但使用不同数据的正确方法是使用这种格式的链接：

<nuxt-link :to=" name: 'index', query:  start: 420 "

然后您可以在页面组件上使用 nuxt 提供的选项 watchQuery 并在 asyncData 中访问该查询，如下所示：

watchQuery: true,

asyncData ( query, app ) 
  const  start  = query
  const queryString = start ? `?start=$start` : ''
  return app.$axios.$get(`apps/$queryString`)
    .then(res => 
      return 
        info: res.results,
        nextPage: res.next,
        prevPage: res.prev
      
    )
,

此选项不需要使用middleware。如果您想坚持使用中间件功能，您可以在使用的布局或页面视图中添加key。这是一个将key 添加到默认布局的示例：

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

这将强制nuxt 重新渲染页面，从而调用中间件和钩子。在切换同一个页面组件的动态路由时触发转换也很有用。

【讨论】：

点赞！这是什么查询字符串？它在服务器和客户端上都有效吗

@PirateApp 谢谢！示例中的“queryString”是一个有效的 URL 查询参数，完全取决于您的应用程序。由于路由导航发生在加载的页面上，因此可以合理地说此功能仅与客户端相关。如果当前路由保持不变，所有组件生命周期钩子都将被执行，但查询参数发生变化（watchQuery: false 不会发生这种情况）