如何使用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获取的数据 像这样

此页

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

但是当我转到下一页时，所有数据都相同的事情没有发生：

这里是我的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钩子才能更新组件的数据。仅更改路由查询。

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

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