middlewareディレクトリは、ページがレンダリングされる前に実行したい処理を定義できるディレクトリです。具体的には初回のローディング時や、ページ移動される時などです。また、middlewareでは非同期通信を扱うことができます。 middlewareの使い方には主に3種類あります。 1. ルーターmiddleware 2. 名前付きmiddleware 3. 匿名middleware 1. 2. の場合には、 middlewareディレクトリ配下に、実行したい処理をjsファイルで定義します 3の場合には、 vue componentファイルに直接実行したい処理を定義します。・ルーター middlewareは、ルートが変更される度（ページ遷移）に実行される処理です。・名前付きmiddlewareは、いくつかのページへ移動する時にだけ実行したい処理がある場合に利用できます。 → 例）ログインしている場合だけ移動できるページが複数あるなど。・匿名middlewareは、特定のページ固有の処理を実行したい場合に利用できます。 ~~~javascript ▼ ルーター middleware の場合 // middleware / stats.js import http from 'http' export default function ({ route }) { return http.post('http://my-stats-api.com', { url: route.fullPath }) } // nuxt.config.js export default { router: { middleware: 'stats' } } ▼ 名前付き middleware の場合 // middleware / authenticated.js export default function ({ store, redirect }) { // ユーザーが認証されていない場合 if (!store.state.authenticated) { return redirect('/login') } } // pages / secret.vue ログインしている時だけ参照できるページ ▼ 匿名 middleware の場合 // pages / secret.vue ~~~

Secret page

Secret page

スキル図鑑