How to watch on Route changes with Nuxt and asyncData

Question

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

Here my middleware:

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

index.vue File

  middleware: [routeReact]

i'm trying to write this:

app.context.route = route

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

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

this the page

i'm clicking link to next page :

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

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

}

Thanks for your help

Solution

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

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

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 }}"

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

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" />

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.

Comments

[PirateApp]

upvoted! what is this queryString? does it work on both server and client

[aBiscuit]

@PirateApp thanks! "queryString" in the example is a valid URL query parameter and totally depends on your application. Since route navigation occurs on the loaded page, it is reasonable to say that this functionality is relevant on the client side only. All the component lifecycle hooks will be executed if current route stays the same, but query params change (which is not happening with watchQuery: false)