web-dev-qa-db-fra.com

Comment surveiller les changements de route avec Nuxt et asyncData

Salut tout le monde, j'essaie de regarder les changements de route dans mon application nuxt js.

Voici mon middleware:

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

fichier index.vue

  middleware: [routeReact]

j'essaye d'écrire ceci:

app.context.route = route

mais il me dit que app.context n'existe pas

Voici le point de ma question, j'essaie de mettre à jour mes données qui proviennent de mon API avec axios à la page si l'itinéraire change comme ça

cette page enter image description here

je clique sur le lien vers la page suivante:

enter image description here

mais quand je suis en route vers la page suivante, rien ne se passe toutes les données sont les mêmes:

enter image description here

ici mon code 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
    };
  })

}

Merci de votre aide

vue.jsvue-routernuxt.js
4
Albert Jovinskyi

Première chose, context.route ou son alias this.$route est un objet immuable et aucune valeur ne doit lui être affectée.

Au lieu de cela, nous devrions utiliser this.$router et c'est méthodes de navigation par programme ou <nuxt-link> et <router-link>.

Si je comprends bien, vous devez rendre le même itinéraire, mais déclencher le crochet asyncData afin de mettre à jour les données du composant. Seule la requête d'itinéraire est modifiée.

La bonne façon de naviguer vers la même page mais avec des données différentes est d'utiliser un lien d'un tel format:

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

Ensuite, vous pouvez utiliser l'option fournie par nuxt watchQuery sur le composant de page et accéder à cette requête dans asyncData comme suit:

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

Cette option ne nécessite pas l'utilisation de middleware. Si vous souhaitez vous en tenir à l'utilisation des fonctions middleware, vous pouvez ajouter un key à la mise en page ou à la vue de page utilisée. Voici un exemple d'ajout d'un key à la disposition par défaut:

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

Cela forcera nuxt à restituer la page, appelant ainsi les middlewares et les hooks. Il est également utile pour déclencher des transitions lors du changement de routes dynamiques du même composant de page.

12
aBiscuit