Q. GridsomeでのURLの設定方法・決め方は？

GridsomeでのURL決定ルールは3つ

GridsomeでURLを決定するのは、

1. src/pages内のVueファイル
2. gridsome.config.js内の設定
3. gridsome.server.js内の設定

の3つです。

それぞれの違いを表にまとめると下記のようになります。

方法	URLの決まり方	静的ページ出力	動的ソースの静的ページ出力
src/pages内のVueファイル	pages以下のパスの通り	○	x
gridsome.config.js	設定を記述	○	○
gridsome.server.js	設定を記述	○	○

違いとしては、GridsomeのTemplateとPageのと違いに近い形になります。

gridsome.config.js、gridsome.server.jsを使う場合は、Templateを使うことになるので、設定ファイル内で自由にURLを決定できます。

// gridsome.config.js
{
  use: '@gridsome/vue-remark',
  options: {
    typeName: 'Articles',
    baseDir: './content/articles',
    template: './src/templates/Articles.vue',
    route: "/articles/:slug/",
  }
},

URLを決定するのは「route」の部分です。データソースから文字列を取得してURLを指定できます。

上の例の場合は、「/content/articles」内にあるマークダウンファイルのフロントマッターにある「slug」という項目を使ってURLを決定しています。

// hogehoge.md
---
title: 記事のタイトル
date: 2021-04-05T02:00:00.000Z
slug: kiji-no-title  // <=== ここを取得する
---

記事本文

フロントマッターにある全てのソースが利用できますが、URLで禁止されている文字列があるとエラーなるので注意が必要です。