自定義路由

在 Nuxt 中，路由由 pages 目錄中的檔案結構定義。然而，由於它底層使用 vue-router，Nuxt 為你提供了幾種在專案中新增自定義路由的方法。

新增自定義路由

在 Nuxt 中，路由由 app/pages 目錄中的檔案結構定義。然而，由於它底層使用Vue RouterNuxt 為你提供了幾種在專案中新增自定義路由的方法。

路由器配置

使用路由器選項，你可以選擇使用一個函式來覆蓋或擴充套件你的路由，該函式接受掃描到的路由並返回自定義路由。

如果它返回 null 或 undefined，Nuxt 將回退到預設路由（這對於修改輸入陣列很有用）。

router.options.ts
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
Nuxt 不會使用你在 definePageMeta 中定義的元資料來增強你從 routes 函式返回的任何新路由。如果你希望這樣做，你應該使用 pages:extend 鉤子，它在構建時呼叫。

頁面鉤子

你可以使用 pages:extend Nuxt 鉤子從掃描的路由中新增、更改或刪除頁面。

例如，阻止為任何 .ts 檔案建立路由

nuxt.config.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 提供了幾種新增路由的方式

路由器選項

除了自定義Vue Router的選項之外，Nuxt 還提供附加選項來自定義路由器。

使用 router.options

這是指定路由器選項的推薦方式。

router.options.ts
import type { RouterConfig } from '@nuxt/schema'

export default {
} satisfies RouterConfig

可以透過在 pages:routerOptions 鉤子中新增檔案來新增更多路由器選項檔案。陣列中靠後的專案會覆蓋靠前的專案。

在此鉤子中新增路由器選項檔案將啟用基於頁面的路由，除非設定了 optional，在這種情況下，它只在基於頁面的路由已經啟用時才適用。
nuxt.config.ts
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/router-options'),
        optional: true,
      })
    },
  },
})

使用 nuxt.config

注意：只有 JSON 可序列化的選項才能配置

  • linkActiveClass
  • linkExactActiveClass
  • end
  • sensitive
  • strict
  • hashMode
  • scrollBehaviorType
nuxt.config
export default defineNuxtConfig({
  router: {
    options: {},
  },
})

雜湊模式 (SPA)

你可以在 SPA 模式下使用 hashMode 配置啟用雜湊歷史記錄。在這種模式下，路由器在實際 URL 前使用一個雜湊字元 (#)，該字元在內部傳遞。啟用後，URL 永遠不會發送到伺服器，並且不支援 SSR。

nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true,
    },
  },
})

雜湊連結的滾動行為

你可以選擇自定義雜湊連結的滾動行為。當你將配置設定為 smooth，並且載入帶有雜湊連結的頁面（例如 https://example.com/blog/my-article#comments），你會看到瀏覽器平滑地滾動到這個錨點。

nuxt.config.ts
export default defineNuxtConfig({
  router: {
    options: {
      scrollBehaviorType: 'smooth',
    },
  },
})

自定義歷史記錄（高階）

你可以選擇使用一個函式來覆蓋歷史記錄模式，該函式接受基本 URL 並返回歷史記錄模式。如果它返回 null 或 undefined，Nuxt 將回退到預設歷史記錄。

router.options.ts
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