自定义路由
在 Nuxt 中，您的路由由 pages 目录中的文件结构定义。但是，由于它在底层使用 vue-router，Nuxt 为您提供了在项目中添加自定义路由的几种方法。
添加自定义路由
在 Nuxt 中，您的路由由 app/pages 目录中的文件结构定义。但是，由于它在底层使用 vue-router，Nuxt 为您提供了在项目中添加自定义路由的几种方法。
路由器配置
使用路由器选项，您可以选择使用一个函数来覆盖或扩展您的路由，该函数接受扫描的路由并返回自定义路由。
如果它返回 null 或 undefined，Nuxt 将回退到默认路由（对于修改输入数组很有用）。
router.options.ts
import type { RouterConfig } from '@nuxt/schema'
export default {
// https://router.vuejs.org/api/interfaces/routeroptions#routes
routes: _routes => [
{
name: 'home',
path: '/',
component: () => import('~/pages/home.vue'),
},
],
} satisfies RouterConfig
Nuxt 不会使用您在提供组件的
definePageMeta 中定义的元数据来增强从 routes 函数返回的任何新路由。如果您希望这种情况发生，您应该使用 pages:extend 钩子，该钩子在构建时被调用。Pages 钩子
您可以使用 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 模块。
Nuxt kit 提供了几种添加路由的方法：
- `extendPages`` (callback: pages => void)
- `extendRouteRules`` (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
路由器选项
除了为 vue-router自定义选项之外，Nuxt 还提供了其他选项来自定义路由器。
使用 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/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 将回退到默认历史记录。
router.options.ts
import type { RouterConfig } from '@nuxt/schema'
import { createMemoryHistory } from 'vue-router'
export default {
// https://router.vuejs.org/api/interfaces/routeroptions
history: base => import.meta.client ? createMemoryHistory(base) : null, /* 默认 */
} satisfies RouterConfig