LoginSignup
0

More than 1 year has passed since last update.

【どハマり】Nuxt generateで動的ルーティングする時は必ずパスの最初にスラッシュをつけよう

Last updated at Posted at 2022-11-05

結論

OK

nuxt.config.js
  generate: {
    async routes() {
      const pages = await axios
        .get(
          //APIリクエスト
        )
        .then((res) =>
          res.data.contents.map((content) => ({
            route: `/${content.id}`,
            payload: content,
          }))
        );
      return pages;
    },
  },

NG

nuxt.config.js
  generate: {
    async routes() {
      const pages = await axios
        .get(
          //APIリクエスト
        )
        .then((res) =>
          res.data.contents.map((content) => ({
            //スラッシュが。。。ない。。。(便宜上、無意味なテンプレートリテラルを使っています)
            route: `${content.id}`,
            payload: content,
          }))
        );
      return pages;
    },
  },

これで1週間くらい悩んだお話。

何が起きたのか

なんてことのない凡ミスなのですが、ここが原因と気づくのにかなり悩みました。

上記コードの通り、nuxtとheadless CMSの組み合わせで開発をしており、nuxt generateの設定で動的ルーティングの記述をしていました。

サンプルコードですが、実際の記事ページを以下のようなコードだと想定します。

/pages/_id/index.vue
<template>
  <div class="article">
    <p>{{ content.title }}</p>
  </div>
</template>

<script>
export default {
  name: "",
  async asyncData({ payload }) {
    if (payload) {
      return {
        content: payload,
      };
    }
  },
};
</script>
<style lang="scss">
</style>

そして、実際にnuxt generateしてページにアクセスした画面が以下のような感じです。

スクリーンショット 2022-11-05 15.10.34.png

画面上には正しくcontent.titleが表示されているにも関わらず、コンソールにJSエラーが出ており、contentが未定義だと怒られています。

これ、説明できる方がいらしたらぜひコメントいただきたいのですが、とても不可解でした。

「generateのルーティング設定でパスの頭にスラッシュの記述を忘れると、ブラウザ上でvueのデータが再評価されてエラーを出力する」という現象だと思うのですが、理論的に原因が説明できません。。。

今回はカルーセルといったJavaScriptコードが動かなくなってしまい、解消に苦戦しました。

同じところでつまづいた方が少しでも楽に解決できればと、もやもやを残しながら投稿させていただきました。

以上です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0