Question

在 Nuxt 3 中，路由由页面目录中的文件结构定义。 但是，由于它在底层使用 vue-router，Nuxt 为您提供了多种在项目中添加自定义路由的方法。

添加自定义路由

在 Nuxt 3 中，路由由 pages 目录 中的文件结构定义。 但是，由于它在底层使用 vue-router，Nuxt 为您提供了多种在项目中添加自定义路由的方法。

使用路由器配置

可以自定义 vue-router 选项。

使用 app/router.options

可以自定义 vue-router 选项。

这是指定路由器选项的推荐方法。

app/router.options.ts

import type { RouterConfig } from '@nuxt/schema'

// https://www.wenjiangs.com/doc/vue-router-interfaces-router-options
export default <RouterConfig> {
}

Using nuxt.config

**注意：**只有 JSON 可序列化选项是可配置的：

• linkActiveClass
• linkExactActiveClass
• end
• sensitive
• strict
• hashMode

nuxt.config

export default defineNuxtConfig({
  router: {
    // https://www.wenjiangs.com/doc/vue-router-interfaces-router-options
    options: {}
  }
})

哈希模式（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://www.wenjiangs.com/doc/vue-router-interfaces-router-options
export default <RouterConfig> {
  history: base => process.client ? createMemoryHistory(base) : null /* default */
}