Nuxt.js + TypeScriptでmiddlewareを使ってページ遷移時に処理を実行する
Nuxt.jsでページ遷移時に処理を行う時にはwatchオプションでルーティングの値の変更を監視することで実行していたのですが(参考記事「Vue.jsでwatchを使ってページ遷移やstateの値の更新を監視する」)TypeScriptを導入してからはなかなか上手くいかないことがあり、調べても情報が見つからなかったりと解決方法に困っていました。そこでそもそもwatchオプションではなく別の方法にするべきではということで、今回はmiddlewareを使ってページ遷移時の処理を作成してみたいと思います。
今回はTypeScriptで書いていく形になるので「@nuxt/types」のモジュールが必要になります。このモジュールがない場合にはあらかじめインストールしておきます。
middlewareはページ遷移のたびに呼ばれるので、ページ遷移時やページが表示される度に実行したい処理などに使うことができます。いろんな機能要件に対応することができるかと思いますので、Nuxt.jsのプロジェクトではぜひ活用していきたいですね。
$ yarn add @nuxt/typesmiddlewareはNuxt.jsにおいてページ表示前に実行される処理を書くところで、storeの情報を扱ったり、リダイレクトを行ったりすることができます。これを使って、ページ遷移時に特定の処理を実行させることができます。使い方としては、ソースディレクトリ直下にある「middleware」ディレクトリ内にファイルを作成し、そこに下記のように処理を書いていきます。 【middleware/routing.ts】
import { Middleware } from '@nuxt/types' const routing: Middleware = (context) => { console.log('ページ遷移されました') } export default routingそしてNuxt.jsの設定ファイルである「nuxt.config.js」のrouterオプションに作成したmiddlewareを定義していきます。これでmiddlewareで作成した処理がが使えるようになります。 【nuxt.config.js】
export default { ....... router: { middleware: 'routing' } ....... }実際にページ遷移時に処理が行われることが確認できます。middlewareで使う関数にある引数の「context」オブジェクトにはstoreやrouteの情報が含まれており、middlewareから参照することができます。例えば下記のようにmiddlewareからdispatchを実行することで、storeの値を更新することができます。
import { Middleware, NuxtAppOptions } from '@nuxt/types' const routing: Middleware = ({ app }: NuxtAppOptions) => { app.store.dispatch('ACTIONS_FUNCTION') } export default routing引数のappはコンテキストオブジェクトに含まれるキーでstoreなどにアクセスすることができます。この時に分割代入をすることで「context.app」のように書く必要がなくシンプルに使うことができます。
アンカーリンクへのスクロール遷移
これを応用すると、アンカーリンクへのスクロール遷移を実装することができます。Nuxt.jsの場合、通常のアンカーリンクの設定ではなく、nuxt-linkを使ってハッシュの値を設定する必要があります。<nuxt-link to="{ path: 'foo', hash: '#bar'}">アンカーリンク</nuxt-link>そして、middlewareでルーティングの情報が変わったタイミングでハッシュに対応するid属性を持つ要素の位置までスクロールさせるように処理を記述します。 【middleware/routing.ts】
import { Middleware, NuxtAppOptions } from '@nuxt/types' const routing: Middleware = ({ route }: NuxtAppOptions) => { if(route.hash) { setTimeout(() => { const hashElememt: HTMLElement = document.querySelector(route.hash) as HTMLElement scrollTo(0, window.pageYOffset + hashElememt.getBoundingClientRect().top) }, 100) } } export default routingここでは、DOMの描画のタイミングによって、document.querySelector(route.hash)でnullになる場合があるのでsetTimeoutで調整するようにしています。
ローディング画面をトップページの初回読み込み時のみ実行する
ウェブサイトの仕様でよくある、初回訪問時にトップページなどでローディング画面を表示させるケースです。middlewareでルーティングの情報を扱えるので、これを使ってトップページかどうかをチェックして、ローディング画面が表示されているかどうかのフラグを更新する形になります。このフラグはstateに値を持たせておくことでローディング画面のコンポーネントとして実装できますね。import { Middleware, NuxtAppOptions } from '@nuxt/types' const routing: Middleware = ({ app, route }: NuxtAppOptions) => { if(route.name !== 'index') { app.store.dispatch('loadingScreenComplete', true) } } export default routing
middlewareはページ遷移のたびに呼ばれるので、ページ遷移時やページが表示される度に実行したい処理などに使うことができます。いろんな機能要件に対応することができるかと思いますので、Nuxt.jsのプロジェクトではぜひ活用していきたいですね。
sponserd
keyword search
recent posts
- Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
Vue.js(Composition API)+TypeScriptの環境でVuex・Vue Router・Axoisを使ってみる#1:環境構築
- メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
メディアクエリを使わないレスポンシブコーディングを試してみる #1:カラムレイアウト
- webpack+Reactの環境にTailwindCSSを導入してみる
webpack+Reactの環境にTailwindCSSを導入してみる
- Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
Vue.js(Options API)からReactへの移行でみる違いと比較 #5:コンポーネント間で値の受け渡し(props)
- Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
Vue.js(Options API)からReactへの移行でみる違いと比較 #4:イベントハンドリング・バインディング
- Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
Vue.js(Options API)からReactへの移行でみる違いと比較 #3:テンプレート処理
- Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
Vue.js(Options API)からReactへの移行でみる違いと比較 #2:メソッド・ステート
- Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
categories