【Nuxt.js】Nuxt文法編：routerプロパティ①

前置き

Vueの場合はルーティングを自由にカスタムできますが、
Nuxtでは自動でルーティングが決まります💡

Nuxtでもvue-routerを
自由にカスタマイズできるのが
routerプロパティ🍒

これを使えばpathやnameなどを
自由に設定できます🤗
metaの設定もできるので
SEO対策としても使えますね👍❗️

公式APIを元に解説していきます🙋‍♀️
公式: https://ja.nuxtjs.org/api/configuration-router/

base

export default {
  router: {
    base: '/app/'
  }
}

export default {

router: {

base: '/app/'

}

こうするとpages配下全てが
appフォルダになります🍎

appフォルダに
諸々を移動するために使います💡
ディレクトリの構成はそのままに
pages>index.vueにアクセスしたければ
http://localhost:3000/app/sample
とすればOKです🙆‍♀️

routeNameSplitter

nameの区切りを変えることができるらしい…
自分の命名規則に
しっかり合わせたいんだ⚡️🎸
という人に。

⬇️通常はparent-idのように-で区切る

コード

区切りを-から/に変更

export default {
  router: {
    routeNameSplitter: '/'
  }
}

export default {

router: {

routeNameSplitter: '/'

}

extendRoutes

pathやnameを自由に設定することで
テンプレートを他のurlでも
表示させたい場合に使えます🎈🧸
これは結構使い道があるかもしれません💡
わざわざlayoutにしなくても使いたい時とか。

あとはmetaを追加できるので、
そちらも後半ご紹介します！

例①1つのテンプレートを使い回す

pages/sample.vueを
http://localhost:3000/sample
以外でも表示させたい場合。
http://localhost:3000/url
で表示させてます。
表示が確認できれば良いので名前は適当です😂笑

コード

) pages

<template>
  <div class="page">
    <p class="text">サンプル</p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
</style>

</div>

</template>

export default {

}

</script>

</style>

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'abc',
        path: '/url',
        component: resolve(__dirname, 'pages/sample.vue')
      })
    }
  },
}

export default {

router: {

extendRoutes(routes, resolve) {

routes.push({

path: '/url',

component: resolve(__dirname, 'pages/sample.vue')

})

}

例②存在しないページは全てerrorページにする

http://localhost:3000/parent
tを取って
http://localhost:3000/paren
にしてみましょう。

⬇️こうなってしまいますね。

⬇️こちらのページを表示させてみましょう🌟

コード

) pages

pages/404.vueを作成

<template>
 <div>
  <h1>Page Not Found</h1>
  <h2>お探しのページが見つかりません</h2>
  <p>
   URLに間違いないか確認し、再度アクセスを試してください。
   また、つながらない場合は時間をおいて再度アクセスしてください。
  </p>
 </div>
</template>

<script></script>

<div>

<h1>Page Not Found</h1>

<h2>お探しのページが見つかりません</h2>

<p>

URLに間違いないか確認し、再度アクセスを試してください。

また、つながらない場合は時間をおいて再度アクセスしてください。

</p>

</div>

</template>

pathは*で全てに適応
pagesに存在しないurlの場合は
全てpages/404.vueを表示してくれます。
ただ01のbase部分には影響しないので
ap/はエラーになるけど
app/なんでもOKになりました。

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  },
}

export default {

router: {

extendRoutes(routes, resolve) {

routes.push({

path: '*',

component: resolve(__dirname, 'pages/404.vue')

})

}

カスタムしたエラーページが表示されており、
nameもcustomになっていることが確認できます👀

エラーページならlayouts/error.vueで作成してもOKです。
その場合はnameがないので
nameを使用したい場合はこっちの方が良いのかも。

metaの設定

extendRoutesにmetaを追加するだけ！

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'sample2',
        path: '/sample2',
        component: resolve(__dirname, 'pages/sample.vue')
        meta: {meta1: 'meta1つめ', meta2: 'meta2つめ'}
      })
    }
  },
}

export default {

router: {

extendRoutes(routes, resolve) {

routes.push({

path: '/sample2',

component: resolve(__dirname, 'pages/sample.vue')

meta: {meta1: 'meta1つめ', meta2: 'meta2つめ'}

})

}

fallback

キャッシュを残すかどうかの設定です。

linkActiveClass

nuxt-linkでネストしたリンクにだけ
defaultでつくnuxt-link-activeクラス。
このクラス名を変えられます💫

defaultがnuxt-link-activeですが
active-linkなど自由に設定できるようになっています。

コード

export default {
  router: {
    linkActiveClass: 'active-link'
  }
}

export default {

router: {

linkActiveClass: 'active-link'

}

linkExactActiveClass

nuxt-linkで完全一致の場合にのみ
つくクラスがあります😯
defaultがnuxt-link-exact-activeです。
完全一致なのでindex.vueであれば
nuxt-link to="/"の場合にのみつきます🍒
このクラス名を自由に設定できます。

コード

export default {
  router: {
    linkExactActiveClass: 'exact-active-link'
  }
}

export default {

router: {

linkExactActiveClass: 'exact-active-link'

}

linkPrefetchedClass

prefetchとは

公式: https://ja.nuxtjs.org/api/components-nuxt-link/

prefetch=先読み
nuxt-linkで先読みさせたいページには
prefetch属性をつけます🌟

コード

<nuxt-link to="/about" prefetch>先読みするページについて</nuxt-link>

1	<nuxt-link to="/about" prefetch>先読みするページについて</nuxt-link>

linkPrefetchedClass

prefetchの名前を変えたい場合に使用します。

コード

export default {
  router: {
    linkPrefetchedClass: 'nuxt-link-prefetched'
  }
}

export default {

router: {

linkPrefetchedClass: 'nuxt-link-prefetched'

}

まとめ

基本的にはrouter周りの
名称が変えられる、
ということみたいですね💫🧞‍♂️

実用的なのは
baseでディレクトリを移動させたり、
extendRoutesでページを使いまわしたり、
SEO対策をしたり、
といったところでしょうか🤔💭