You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Page traduite Le contenu de cette page peut être déprécié.

La propriété watchQuery

Surveille les query strings et exécute des méthodes de composant lors d'un changement (asyncData, fetch(context), validate, layout, ...).


  • Type: Boolean ou Array ou Function (par défaut: [])

Utilisez la propriété watchQuery pour surveiller les query strings. Si les strings changent, toutes les méthodes du composant (asyncData, fetch(context), validate, layout, ...) seront appelées. La surveillance est désactivée par défaut pour des raisons de performance.

Si l'on souhaite surveiller toutes les query strings, il faut définir watchQuery: true.

export default {
  watchQuery: ['page']
}

On peut aussi utiliser la fonction watchQuery(nouvelleRequete, ancienneRequete) pour avoir une surveillance plus précise.

export default {
  watchQuery(nouvelleRequete, ancienneRequete) {
    // Exécute seulement les méthodes du composant dans le cas où l'ancienne query string
    // contenait la chaîne de caractères `bar` et la nouvelle `foo`
    return nouvelleRequete.foo && ancienneRequete.bar
  }
}
Le nouveau hook fetch (disponible depuis la version 2.12) n'est pas affecté par watchQuery. Pour plus d'informations, se référer aux changements sur la surveillance des query strings .