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

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

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

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

Nuxt.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

372閲覧

Nuxtのページング実装で記事詳細のテンプレートに遷移してしまう

yoshi_bgn

総合スコア12

Vue.js

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

Nuxt.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/10/16 10:27

前提・実現したいこと

NuxtとmicroCMSでお知らせ一覧のページングを実装したいです。
お知らせは詳細ページをもっていて、データはmicroCMSから取得してきます。

公式ブログ(NuxtのJamstack構成におけるページングの実装)を参考に
ページングを実装しているのですが、
一覧ページのURLに2ページ目を指定すると記事詳細のテンプレートに飛んでしまいます。

該当のソースコード

ディレクトリの構成:

/pages/news/index.vue /pages/news/_id/index.vue

nuxt.config.js:

javascript

1export default { 2 3 router: { 4 extendRoutes(routes, resolve) { 5 routes.push({ 6 path: '/news/:p', 7 component: resolve(__dirname, 'pages/news/index.vue'), 8 name: 'news', 9 }) 10 }, 11 }, 12 ... 13}

挙動:

/news/ -> 記事一覧 /news/2/ -> 記事詳細 /news/xxxx/ -> 記事詳細

/news/2/と打つと記事一覧の2ページ目に飛ぶようにしたいのですが
記事詳細のテンプレートに遷移してしまうという現象に陥っています。

試したこと

記事詳細と区別するため、pathプロパティにページング用のパスを追加してみました
→TOPページにリダイレクトされます・・

router: { extendRoutes(routes, resolve) { routes.push({ path: '/news/page/:p', // pageを追加 component: resolve(__dirname, 'pages/news/index.vue'), name: 'news', }) }, },

ページ番号も記事のidとみなされているから詳細に飛んでしまうというところまで緒を掴めたのですが、
どう対処して良いのかわからず、、お手数をおかけしますがご教授いただけるとありがたいです。

よろしくお願いします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問