Vueと共通

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

前置き

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

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

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

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


base

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

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


routeNameSplitter

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

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

コード

区切りを-から/に変更


extendRoutes

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

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


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

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

コード

) pages


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

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

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

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

コード

) pages

pages/404.vueを作成

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

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

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


metaの設定

extendRoutesmetaを追加するだけ!


fallback

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


linkActiveClass

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

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

コード


linkExactActiveClass

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

コード


linkPrefetchedClass

prefetchとは

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

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

コード

linkPrefetchedClass

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

コード


まとめ

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

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

-Vueと共通
-,

© 2020 aLiz Nuxt