web-dev-qa-db-ja.com

NuxtとasyncDataでルートの変更を監視する方法

こんにちは、私のnuxt jsアプリでルート変更を監視しようとしている皆さん。

ここに私のミドルウェア：

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

index.vueファイル

  middleware: [routeReact]

私はこれを書こうとしています：

app.context.route = route

app.contextは存在しないと私に言います

これが私の質問の要点です、ルートがこのように変更された場合、私のAPIから取得したデータをページ上のaxiosで更新しようとしています

このページ enter image description here

次のページへのリンクをクリックしています：

enter image description here

しかし、次のページに移動するとき、すべてのデータが同じになることはありません。

enter image description here

ここに私の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
    };
  })

}

ご協力いただきありがとうございます

vue.jsvue-routernuxt.js
4
Albert Jovinskyi

まず、context.routeまたはそのエイリアスthis.$routeは不変オブジェクトであり、値を割り当てないでください。

代わりに、this.$routerを使用する必要があります プログラムによるナビゲーションの方法 または<nuxt-link>および<router-link>です。

私が理解しているように、同じルートをレンダリングする必要がありますが、コンポーネントのデータを更新するためにasyncDataフックをトリガーします。ルートクエリのみが変更されます。

同じページに移動するがデータが異なる正しい方法は、そのような形式のリンクを使用することです。

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

次に、nuxt提供のオプション watchQuery をページコンポーネントで使用し、次のようにasyncData内のそのクエリにアクセスできます。

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を追加する例を次に示します。

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

これにより、nuxtが強制的にページを再レンダリングし、ミドルウェアとフックを呼び出します。また、同じページコンポーネントの動的ルートを切り替えるときに遷移をトリガーするのにも役立ちます。

12
aBiscuit