如何使用 Nuxt 和 asyncData 观察路由变化 [英] How to watch on Route changes with Nuxt and asyncData

问题描述

大家好，我正在尝试在我的 nuxt js 应用程序中观察路线变化.

Hi everybody i'm trying to watch on route changes in my nuxt js app.

这里是我的中间件:

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

index.vue 文件

index.vue File

  middleware: [routeReact]

我正在尝试写这个:

app.context.route = route

但它告诉我 app.context 不存在

but it says to me that app.context doesn't exist

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

Here's the point of my question i'm trying to update my data that gets from my api with axios on page if route changing like this

这是页面

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

i'm clicking link to next page :

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

but when i'm route to next page, nothing happens all data is the same:

这里是我的 asyncData 代码:

here my asyncData code:

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
    };
  })

}

感谢您的帮助

推荐答案

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

First thing, context.route or it's alias this.$route is immutable object and should not be assigned a value.

相反，我们应该使用 this.$router 而它是 程序化导航的方法或和.

Instead, we should use this.$router and it's methods for programmatic navigation or <nuxt-link> and <router-link>.

据我所知，您需要渲染相同的路由，但触发 asyncData 钩子以更新组件的数据.只更改了路由查询.

As I understand, you need to render the same route, but trigger asyncData hook in order to update component's data. Only route query is changed.

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

Correct way to navigate to the same page but with different data is to use link of such format:

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

然后您可以在页面组件上使用 nuxt 提供的选项 watchQuery 并在 asyncData 如下:

Then you can use nuxt provided option watchQuery on page component and access that query inside asyncData as follows:

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 添加到默认布局的示例:

This option does not require usage of middleware. If you want to stick to using middleware functions, you can add a key to layout or page view that is used. Here is an example of adding a key to default layout:

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

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

This will force nuxt to re-render the page, thus calling middlewares and hooks. It is also useful for triggering transitions when switching dynamic routes of the same page component.

这篇关于如何使用 Nuxt 和 asyncData 观察路由变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！