概要
Nuxtにはミドルウェアという機構がある。
ミドルウェアを使うと、ページがレンダリングされる前に、実行されるカスタム関数を定義できる。
複数のページでミドルウェアを実行するには3つ方法がある。
nuxt.config.js
で読み込まれる方法を使うと、すべての画面遷移時にミドルウェアが実行されるようになる。
(ブラウザの更新ボタンによるリロード含む)
この方法を試してみる。
なおMiddlewareは nuxt.config.js
→ レイアウト → page の順で実行されるそうだ。
Middlewareの作成
単純にログだけ吐くミドルウェア、middleware/sample.js
を作成する
export default function({ route }) { console.log('サンプルミドルウェア', route.path) }
routerでの読み込み
nuxt.config.js
で作成したミドルウェアを読み込む。
module.exports = { router: { middleware: 'sample' } }
これで、全画面遷移時にパスをログ出力するようになる。
いろいろやってみる
せっかくなので middleware/sample.js
修正して色々試してみる。
- パスの値を判定
- Vuexストアの値を操作
- ストアの値を見てリダイレクト
export default function({ route, redirect, store }) { // ログ出力 console.log('サンプルミドルウェア', route.path) // 現在のパスを取得 const currentPath = route.path if (currentPath !== '/hoge') { // hogeページでは何もしない return } // storeに数値を保持してカウントアップする store.dispatch('count/countUp') const count = store.getters['count/count'] if (count % 2 === 0) { // storeの値が偶数のときだけhogeページは表示できる console.log('hogeページに行けるのはstoreが偶数のときだけ', count) // fugaページにリダイレクト redirect('/fuga') } }
この例で使用しているVuexストアは store/count.js
で下記の通り。
export const state = () => ({ count: 0, }) export const mutations = { increment(state) { state.count++ }, } export const getters = { count(state) { return state.count }, } export const actions = { countUp(context) { context.commit('increment') }, }