自訂路由
新增自訂路由
在 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
頁面鉤子
您可以使用 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: {}
}
})
Hash 模式 (SPA)
您可以使用 hashMode 設定在 SPA 模式中啟用 hash 歷史記錄。 在此模式下，路由器在內部傳遞的實際 URL 之前使用 hash 字元 (#)。 啟用後，URL 永遠不會發送到伺服器，並且不支援 SSR。
export default defineNuxtConfig({
ssr: false,
router: {
options: {
hashMode: true
}
}
})
hash 連結的滾動行為
您可以選擇性地自訂 hash 連結的滾動行為。 當您將 設定設定為 smooth，並且載入帶有 hash 連結的頁面（例如 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