質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

Q&A

1回答

3626閲覧

Nuxt.jsの動的ルーティングの際の404ページについて

asasaas

総合スコア26

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

0グッド

0クリップ

投稿2020/12/03 06:48

環境
Vue.js + Nuxt.js
Contentful
Netlify

解決したい問題
JamStackなブログで動的ルーティングをした際、用意をしていないページにアクセスした際に404ページを表示したい。

ディレクトリ構成

layout/  ├ default.vue  └ error.vue //TOP pages/  ├ index.vue //TOP  ├ _category.vue //カテゴリページ index/_category  └ _blog/    └ _slug.vue //記事ページ index/category/_slug

現状
この構成の場合、index/hogeにアクセスした際、用意していない場合であっても_category.vueの内容が表示されてしまいます。
また、index/hoge/hogeにアクセスした際にもlayoutに用意したエラーページが表示されず何もない状態になってしまいます。

解決案

layout/  ├ default.vue  └ error.vue //TOP pages/  ├ index.vue //TOP  ├ category1.vue //カテゴリ1ページ index/category1  ├ category2.vue //カテゴリ2ページ index/category2  ├ category3.vue //カテゴリ3ページ index/category3  └ _blog/ ├ index.vue //カテゴリエラーページ index/hoge    └ _slug.vue //記事ページ index/category/_slug

存在しないカテゴリーページ(index/hoge)にアクセスした際にエラーページが表示されない問題を解決する案として、上記のように用意しているカテゴリーのページをそれぞれ用意しておくことで対応はできるのですが、この方法が良いものと言えるのかわかりません。

何か良い方法があれば教えていただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

js

1 generate: { 2 fallback: true, 3 async routes() { 4 ... 5 } 6 },

nuxt.config.jsのfallbackをtrueにしてerror.vueで基本的には返して、それ以外のエラーではなく、

コンテンツがないって状態ならメッセージでまだないって書いたほうがいい気がする

jsonのデータが空 => 「この記事はまだ作成されてません」みたいな感じでv-if、v-showとかで実装するイメージ

投稿2021/02/19 19:56

taka-5683

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問