web-dev-qa-db-ja.com

Nuxt.JS：ページでルートURLパラメーターを取得する方法

私はNuxt.jsを使用していますが、下に定義されている動的なページがあります

pages/post/_slug.vue

したがって、たとえば http：// localhost：3000/post/hello-world のようなページのURLにアクセスすると、ページ内でこのslugパラメーター値をどのように読み取ることができますか。

現在、次のようにasyncDataを使用して取得しています：

  asyncData ({ params }) {
    // called every time before loading the component
    return {
      slug: params.slug
    }
  }

これは正常に機能していますが、これは最良の方法ではないと思うので、ページでパラメーターを使用可能にするより良い方法があるはずです。どんな助けも大歓迎です！

javascriptvue.jsnuxt.js
10
asanas

ページvueファイルで、これを使用してルートオブジェクトを取得します。

this.$route

このような：

<script>
export default {
  mounted() {
    console.log(this.$route.fullPath);//or $route.path, which excluding url query 
  }
};
</script>

あなたの場合のように、url path paramsはroute.paramsの下にありますroute.params.slug

<script>
export default {
  mounted() {
    console.log(this.$route.params.slug);
  }
};
</script>

vue mouted hookはクライアントのみを実行します。サーバーでパラメーターを取得する場合は、asyncDataメソッドを使用できます。

<script>
export default {
    asyncData({route, params}) {
        //use route
        console.log(route.params.slug)
        //directly use params
        console.log(params.slug)
    }
};
</script>

サーバーでのみコードを実行する場合：

<script>
export default {
    asyncData({route, params}) {
        if (process.server) {
            console.log(route.params.slug)
        }
    }
};
</script>

サーバー上のパラメーター情報が必要ない場合は、asyncDataメソッドは必要ないと思う。

12
Franci

ルーティングパラメータに簡単にアクセスできます

グローバルに使用しますが、良い習慣ではありません：

window。$ nuxt._route.params

ページ/コンポーネント/レイアウトなどでのローカル使用のために、常に以下のように練習する必要があります

this。$ route

または

this。$ nuxt._route.params

2
Md Mahamudul Hasan

Nuxtのドキュメントは適切に管理されており、 https://nuxtjs.org/api/context/ asyncDataに従って、さまざまなルーターおよびサーバー機能にアクセスするためのAPIを公開しています。より明確にするために、Nuxtjsポータルの公式例を確認できます。 https://nuxtjs.org/examples/custom-routes

1
Pravin Singh

apolloスマートクエリ内のルート情報にアクセスする場合は、他の答えで十分です。

  apollo: {
    items: {
      query: jobsBy,
      variables() {
        return {
          clientId: this.$route.query.id
        }
      },
    }
  }
0
bob

私の知る限りでは、これがすでに最良の方法です。しかし、私はあなたのニーズに合うかもしれないわずかに異なるアプローチを提案することができます。 パラメータをVMに入れて後で処理する場合）の代わりに、asyncDataメソッドを使用してサーバーからデータを取得します。その後、プレゼンテーションロジックでresultデータを処理できますが、requestの種類は処理できません。 [〜＃〜] vm [〜＃〜]に何も渡したくない場合はフェッチするか、必要に応じてmiddlewareを代わりに使用します。

0
monk