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

Question

大家好，我正在尝试在我的 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 获取的数据像这样

此页面

我正在单击 link 到下一页：

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

这里是我的 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
    };
  })

}

感谢您的帮助

Answer 1

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

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

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

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

<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 重新呈现页面，从而调用中间件和挂钩。在切换同一页面组件的动态路由时，它也有助于触发转换。

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

How to watch on Route changes with Nuxt and asyncData

vue.js

vue-router

nuxt.js