Nuxt.jsでAxios Moduleを利用する

2019年7月15日

Axios Module(axios-module)は、axiosをラッパーし様々な機能を追加したNuxt.js専用のモジュールです。

 

Nuxt.jsのインストールについては下記ページをご覧下さい。

 

Nuxt.js入門 [$route.params][layouts]

 

またaxios自体、および本記事で利用するJSONデータについては下記ページもご覧下さい。

 

axiosでJSONを取得する[Vue.js]

 

 

インストールします。

 

nuxt.config.js ファイルのmodulesに「@nuxtjs/axios」を追記します。

 

「pages」ディレクトリに、ページコンポーネントとしてのsample.vueを作成し、下記のように記述します。

11行目

asyncDataはページコンポーネントがローディングされる前に実行され、サーバーサイドレンダリング(SSR)を実装するためのNuxt.js独自のメソッドです。

 

 

次にリクエスト先が404エラーとなった場合に、ページ遷移をさせてみます。

 

nuxt.config.js ファイルのpluginsに「~/plugins/axios」を追記します。

 

「plugins」ディレクトリに、axios.jsファイルを作成し、下記のように記述します。

 

最後に「pages」ディレクトリに、ページコンポーネントとしての404.vueを作成し、下記のように記述します。

 

もしリクエスト先が404エラーとなった場合、下記アドレスに自動的に遷移します。

 

 

CORS (Cross-Origin Resource Sharing) によるブロックに関しては下記ページをご参照下さい。

 

Nuxt.jsで@nuxtjs/proxyを利用する [CORS][Axios]

 

 

 

参照ページ


 

Axios Module

 

asyncData メソッド

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー