カスタムルーティング
カスタムルートの追加
Nuxt 3では、ルーティングはpagesディレクトリ内のファイルの構造によって定義されます。しかし、内部的にはvue-routerを使用しているため、Nuxtではプロジェクトにカスタムルートを追加する方法がいくつか用意されています。
ルーター設定
ルーターオプションを使用すると、スキャンされたルートを受け取り、カスタマイズされたルートを返す関数を使用して、オプションでルートを上書きまたは拡張できます。
nullまたはundefinedを返すと、Nuxtはデフォルトのルートにフォールバックします（入力配列を変更する場合に便利です）。
import type { RouterConfig } from '@nuxt/schema'
export default {
// https://router.vuejs.org/api/interfaces/routeroptions.html#routes
routes: (_routes) => [
{
name: 'home',
path: '/',
component: () => import('~/pages/home.vue')
}
],
} satisfies RouterConfig
definePageMetaで定義されたメタデータで、routes関数から返された新しいルートを増強しません。これを実現するには、ビルド時に呼び出されるpages:extendフックを使用する必要があります。ページフック
pages:extend Nuxtフックを使用して、スキャンされたルートからページを追加、変更、または削除できます。
たとえば、.tsファイルのルートの作成を防ぐには
import type { NuxtPage } from '@nuxt/schema'
export default defineNuxtConfig({
hooks: {
'pages:extend' (pages) {
// add a route
pages.push({
name: 'profile',
path: '/profile',
file: '~/extra-pages/profile.vue'
})
// remove routes
function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) {
const pagesToRemove: NuxtPage[] = []
for (const page of pages) {
if (page.file && pattern.test(page.file)) {
pagesToRemove.push(page)
} else {
removePagesMatching(pattern, page.children)
}
}
for (const page of pagesToRemove) {
pages.splice(pages.indexOf(page), 1)
}
}
removePagesMatching(/\.ts$/, pages)
}
}
})
Nuxt モジュール
特定の機能に関連するページセット全体を追加する場合は、Nuxtモジュールを使用することをお勧めします。
Nuxt kitでは、ルートを追加する方法がいくつか用意されています。
extendPages(callback: pages => void)extendRouteRules(route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
ルーターオプション
vue-routerのオプションのカスタマイズに加えて、Nuxtではルーターをカスタマイズするための追加オプションが提供されています。
app/router.optionsの使用
これは、ルーターオプションを指定する推奨される方法です。
import type { RouterConfig } from '@nuxt/schema'
export default {
} satisfies RouterConfig
pages:routerOptionsフック内にファイルを追加することで、ルーターオプションファイルを追加できます。配列内の後の項目は、前の項目を上書きします。
optionalが設定されていない限り、ページベースのルーティングがオンになります。設定されている場合は、ページベースのルーティングがすでに有効になっている場合にのみ適用されます。import { createResolver } from '@nuxt/kit'
export default defineNuxtConfig({
hooks: {
'pages:routerOptions' ({ files }) {
const resolver = createResolver(import.meta.url)
// add a route
files.push({
path: resolver.resolve('./runtime/app/router-options'),
optional: true
})
}
}
})
nuxt.configの使用
注: JSONシリアライズ可能なオプションのみが設定可能です
linkActiveClasslinkExactActiveClassendsensitivestricthashModescrollBehaviorType
export default defineNuxtConfig({
router: {
options: {}
}
})
ハッシュモード（SPA）
hashMode設定を使用すると、SPAモードでハッシュ履歴を有効にできます。このモードでは、ルーターは内部的に渡される実際のURLの前にハッシュ文字（#）を使用します。有効にすると、URLはサーバーに送信されず、SSRはサポートされません。
export default defineNuxtConfig({
ssr: false,
router: {
options: {
hashMode: true
}
}
})
ハッシュリンクのスクロール動作
設定をsmoothに設定し、ハッシュリンク（例：https://example.com/blog/my-article#comments）を含むページをロードすると、ブラウザがこのアンカーまでスムーズにスクロールするのがわかります。
export default defineNuxtConfig({
router: {
options: {
scrollBehaviorType: 'smooth'
}
}
})
カスタム履歴（高度）
ベースURLを受け取り、履歴モードを返す関数を使用して、オプションで履歴モードを上書きできます。nullまたはundefinedを返すと、Nuxtはデフォルトの履歴にフォールバックします。
import type { RouterConfig } from '@nuxt/schema'
import { createMemoryHistory } from 'vue-router'
export default {
// https://router.vuejs.org/api/interfaces/routeroptions.html
history: base => import.meta.client ? createMemoryHistory(base) : null /* default */
} satisfies RouterConfig