👋

nuxt v2系 + composition apiでナビゲーションガードをする方法

2021/10/02に公開

JavaScript

はじめに

composition-apiが出て、2系のNuxtとcomposition-apiを合わせて使う方が多いのではないでしょうか？

Nuxt 2系とcomposition-apiの組み合わせでなビゲーションガードを実装するのに難航したので忘備録として記事にしておきます。
（Nuxt 3系がリリースされたら多分使わなくなると思う）

version

Nuxt 2.15.xx
@nuxtjs/composition-api 0.26.0

ナビゲーションガードをする

こちらの記事にあるように、

Vue3からは

import { defineComponent } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

export default defineComponent({
  setup() {
    onBeforeRouteLeave((_to, _from, next) => {
      next()
    })

    onBeforeRouteUpdate((_to, _from, next) => {
      next()
    })
  },
})

のようにonBeforeRouteLeave, onBeforeRouteUpdateを用いて書くことができますが、
これはVue2 (Nuxt2) + composition-api だと機能しません。

コンポーネント内ガード

import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  beforeRouteUpdate(_to, _from, next) {
    this.hoge() // ほげ〜
    next()
  },
  beforeRouteLeave(_to, _from, next) {
    this.hoge() // ほげ〜
    next()
  },
  setup() {
    const hoge = () => {
      // ほげ〜
    }
    return {
      hoge,
    }
  },
})

defineComponentの引数は
beforeRouteUpdateやbeforeRouteLeave,その他Vue2で使えるライフサイクルを記述することができるので、ここに書くことが可能です。
なお、setup()のreturnで返した関数にthis.でアクセスすることもできます。

※なお。こちらはページコンポーネントしか動きません。

グローバルガード

src/plugins/globalSetup.ts
グローバルセットアップ内で、router.beforeResolveを用いて実現可能です。
（他の場所に記述しても動くと思いますが、ここに書くのがいいかなと思っています）

import { onGlobalSetup, useRouter } from '@nuxtjs/composition-api'

export default () => {
  onGlobalSetup(() => {
    const router = useRouter()

    router.beforeResolve((_to, _from, next) => {
      next()
    })
  })
}

※なお、こちらは
nuxt.config.ts内で

plugins: ['plugins/globalSetup'],

する必要があります。ファイル名はなんでも大丈夫です。

GitHubで編集を提案

はじめに

ナビゲーションガードをする

コンポーネント内ガード

グローバルガード

Discussion