Nuxtで直接アクセスを禁止にするmiddlewareを作る

SPAで作っている場合、初期処理は別ページでするので深いページへの直接アクセスを禁止にしたい。みたいなことがあります。
そのような場合に、直接アクセスで別ページ（初期処理をするページ）にリダイレクトするmiddlwareの作り方の紹介です。

デモ

直接アクセス可能なURL

直接アクセスするとトップページに飛ばされるURL

実装

直接アクセスを禁止にするmiddlewareを作る

仕組みは本当にシンプルで from.name と route.name が一致した場合に直接アクセスと判断しています。

middleware/disable-direct-access.js

export default function({ from, route, redirect }) {
  if (from.name === route.name) {
    redirect('/')
  }
}

middlwareを設定

これは先ほど作成したmiddlwareをmiddlwareプロパティに指定するだけです。
※nuxt.config.jsにもmiddlwareを設定しています。

pages/middleware-sample/disable-direct-access.vue

<template>
  <div>
    <h1>disable-direct-access</h1>
    <nuxt-link to="/">top</nuxt-link>
  </div>
</template>

<script>
export default {
  middleware: 'disable-direct-access'
}
</script>

あとがき

全コードを公開しているので置いときます。
https://github.com/howdy39/nuxt-playground

もっと良いやり方あるよって場合、コメントくれると嬉しいです。