# 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
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

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 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
php 開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ