# Nuxtjs 動的なルーティング静的ページ自動生成

ブログ記事の一覧を API から取得して動的なルーティングをする場合、動的なルーティングを静的ページ作成して SEO 向上効果があります。動的ルーティングを使うサービスの仕事があったので、メモしておきます。

動的なルーティングとは

ルートの名前を決まったわけではないルートで、アクセスによって同期非同期で API 通信したりしてページへルーティングすることが動的ルーティングだと思います。
Nuxtjs において動的なルーティングを生成するには、.vue ファイル名またはディレクトリ名の前にアンダースコアを付ける必要があります。ファイル名やディレクトリ名は好みでつけられますが、その前にアンダースコアを必ず付けるルールになっています。

例えばこんな感じ

pages/
--| _slug/

# 動的ルーティングのパラメータ取得

動的なページ/page/_id.vueから id パラメーターにアクセスしたい場合 this.$route.params.id 使います。

this.$route.params は動的セグメントとスターセグメントの key/value ペアを保持するオブジェクト。

nuxtjs vue router params query ルートから取得できるもの

# 動的ルーティング静的ページ生成設定

fetch 使ってもいいでしょうけど、axios が使い慣れているので、axios の使い方貼ります。

generate にある routes()に axios 追加すれば OK の話ですが、netlify などのサーバー上でリロードしたら 404 になってしまうので、fallback: trueオプションを付けてあげた方が無難。

nuxt.config.js







 
 
 
 
 
 
 
 
 
 
 
 
 

import axios from "axios";

  axios: {
    baseURL: process.env.END_POINT,
    timeout: 5000
  },
  generate: {
    fallback: true,
    routes() {
      return axios
        .get(process.env.END_POINT + "/list?limit=999")
        .then(({ data }) => {
          console.log(data);
          return data.data.map(item => {
            return "/list/" + item.id;
          });
        });
    }
  }

因みに上に axios baseURL 設定してありますが、generate には使えないので、END_POINT 付けています。

api 通信以外にサーバー側で json 生成しておいてフロントから route()自動生成してもいい感じですね。

const items = require("./data/items.json");
generate: {
    fallback: true,
      routes() {
        return items.map(item => {
          return "/list/" + item.id;
      });
    }
  }

# generate のオプション

generate: {
      // デフォルト設定
  cache: {
    ignore: [
      ".nuxt", // buildDir
      "static", // dir.static
      "dist", // generate.dir
      "node_modules",
      ".**/*",
      ".*",
      "README.md",
    ];
  },
  // 1 スレッドで実行されるルートの
  concurrency: 500,
  // クロールしたリンクに基づいて動的リンクを生成する
  crawler: true,
  // ビルドされる時に作成されるディレクトリ名
  dir:'dist',
  // vue-devtools による検査を許可するかどうか
  devtools: false,
  // ルートの生成除外 正規表現できる
  exclude: [],
  // フォールバックする HTML ファイルのパス
  fallback: '200.html',
  interval: 0,
  // 静的ルート定義
  routes: []
}

# cache

リビルドを避けるために使うオプションで
Object 型または false

# concurrency

型: Number
デフォルトは 500

魔法の concurrency オプションはルート生成を並行に設定してくれます。 1 スレッドで実行されるルートの数を指定できます。

# crawler

相対リンクをクロールし、クロールしたリンクに基づいて動的リンクを生成するクローラーがインストールされています。こんなの知らなかった

型: boolean
デフォルト: true

# dir

型: String
デフォルト: 'dist'

nuxt generate コマンドでビルドされる時に作成されるディレクトリ名

# devtools

型: boolean
デフォルト: false

vue-devtools による検査を許可するかどうかを設定

# exclude

型: Array
要素: String または RegExp

正規表現使ってルートの生成除外できる

exclude: [
  /^\/admin/, // /admin で始まるパス
];

# fallback

型: String または Boolean
デフォルト: 200.html

フォールバックする HTML ファイルのパス
true を設定すると、ファイル名は 404.html になります

# interval

型: Number
デフォルト: 0

少し難しそうな意味がもつ interval オプションですが、使う時があるでしょうか?2 つのレンダーの間でのミリセカンドのインターバルで、ウェブアプリケーションからの潜在的な API に対して溢れでないようにするためのもの

# routes

型: Array

静的ルートを手動で作成したい場合使う

2021-08-23
  • vuejs
  • javascript

関連記事

Javascript 非同期処理 async と await のメモ
Nuxtjs 3 に Ant design Vue を使う
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
vuejs v-if と v-show の違い
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ