自定义路由
在 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 钩子，这将在 build-time 被调用。页面钩子
您可以使用 pages:extend nuxt 钩子从扫描的路由中添加、更改或移除页面。
例如，要防止为任何 .ts 文件创建路由：
nuxt.config.ts
import type { NuxtPage } from '@nuxt/schema'
export default defineNuxtConfig({
hooks: {
'pages:extend' (pages) {
// 添加一个路由
pages.push({
name: 'profile',
path: '/profile',
file: '~/extra-pages/profile.vue'
})
// 移除路由
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(回调: pages => void)extendRouteRules(路线：字符串，规则：NitroRouteConfig，选项：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)
// 添加一个路由
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