自定义路由
在 Nuxt 3 中，你的路由是根据 pages 目录内文件的结构来定义的。然而，由于它在内部使用了 vue-router，Nuxt 为你的项目提供了几种自定义路由的方式。
添加自定义路由
在 Nuxt 3 中，你的路由是根据页面目录中文件的结构来定义的。然而，由于它在底层使用了 vue-router，Nuxt 提供了几种在项目中添加自定义路由的方式。
路由配置
通过使用 路由选项，你可以选择性地覆盖或扩展你的路由，使用一个接受扫描到的路由并返回自定义路由的函数。
如果返回 null 或 undefined，Nuxt 将回退到默认路由（对于修改输入数组非常有用）。
app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'
// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig> {
routes: (_routes) => [
{
name: 'home',
path: '/',
component: () => import('~/pages/home.vue').then(r => r.default || r)
}
],
}
Nuxt 不会用组件的
definePageMeta 中定义的元数据来增强你从 routes 函数返回的新路由。如果你希望发生这种情况，你应该使用 pages:extend 钩子，它是在构建时调用的。Pages 钩子
你可以使用 pages:extend nuxt 钩子来添加、修改或删除扫描到的路由中的页面。
例如，要阻止为任何 .ts 文件创建路由：
nuxt.config.ts
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 = []
for (const page of pages) {
if (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 选项。
使用 app/router.options
可以自定义 vue-router 选项。
这是指定路由选项的推荐方式。
app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'
// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig> {
}
使用 nuxt.config
**注意：**只有可序列化为 JSON 的选项可配置：
linkActiveClasslinkExactActiveClassendsensitivestricthashMode
nuxt.config
export default defineNuxtConfig({
router: {
// https://router.vuejs.org/api/interfaces/routeroptions.html
options: {}
}
})
Hash 模式（SPA）
你可以在 SPA 模式下启用哈希历史。在这种模式下，路由器在实际 URL 前使用一个哈希字符（#），该字符在内部传递。启用后，URL 永远不会发送到服务器，不支持 SSR。
nuxt.config.ts
export default defineNuxtConfig({
ssr: false,
router: {
options: {
hashMode: true
}
}
})
自定义历史记录（高级）
你可以选择使用一个接受基本 URL 并返回历史记录模式的函数来覆盖历史模式。如果返回 null 或 undefined，Nuxt 将回退到默认历史模式。
app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'
import { createMemoryHistory } from 'vue-router'
// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterConfig> {
history: base => process.client ? createMemoryHistory(base) : null /* 默认 */
}