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

翻訳されたページ このページのコンテンツは古い可能性があります。

watchQuery プロパティ

クエリ文字列を監視し、変更時にコンポーネントメソッドを実行します(asyncData、fetch、validate、layout など)


  • 型: Boolean または Array または Function (デフォルト: [])

watchQuery キーを設定し、監視するクエリ文字列を設定します。定義した文字列に変更が生じると、全てのコンポーネントメソッド(asyncData、fetch、validate、layout などが呼ばれます。パフォーマンス向上のため、監視はデフォルトで無効になっています。

すべてのクエリ文字列に対して監視を設定したい場合は watchQuery: true を設定してください。

export default {
  watchQuery: ['page']
}

より洗練された監視のために watchQuery(newQuery, oldQuery) 関数を使用することもできます。

export default {
  watchQuery(newQuery, oldQuery) {
    // 古いクエリ文字列に `bar` が含まれている場合コンポーネントメソッドのみを実行し、
    // そして、新しいクエリ文字列には `foo` が含まれる
    return newQuery.foo && oldQuery.bar
  }
}
警告: v2.12 で導入された新しい fetch フックは watchQuery の影響を受けません。詳しくはクエリ文字列の変化のリスニング を参照してください。