自訂路由
在 Nuxt 3 中，您的路由是由 `pages` 目錄中檔案的結構所定義。然而，由於它在底層使用 vue-router，Nuxt 為您提供了幾種在專案中新增自訂路由的方法。
新增自訂路由
在 Nuxt 3 中，您的路由是由 pages 目錄中檔案的結構所定義。然而，由於它在底層使用 vue-router，Nuxt 為您提供了幾種在專案中新增自訂路由的方法。
路由器設定
使用 路由器選項，您可以選擇使用一個函數來覆寫或擴展您的路由，該函數接受掃描的路由並返回自訂的路由。
如果它返回 null 或 undefined，Nuxt 將會回復到預設的路由（適用於修改輸入陣列）。
app/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 模組。
extendPages(callback: pages => void)extendRouteRules(route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
路由器選項
除了自訂 vue-router 的選項之外，Nuxt 還提供了 其他選項來自訂路由器。
使用 app/router.options
這是指定 路由器選項的建議方式。
app/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/app/router-options'),
optional: true
})
}
}
})
使用 nuxt.config
注意：只有 JSON 可序列化的 選項是可設定的
linkActiveClasslinkExactActiveClassendsensitivestricthashModescrollBehaviorType
nuxt.config
export default defineNuxtConfig({
router: {
options: {}
}
})
雜湊模式 (SPA)
您可以使用 hashMode 設定在 SPA 模式中啟用雜湊歷史記錄。在此模式中，路由器在內部傳遞的實際 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 將會回復到預設的歷史記錄。
app/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