自定义路由 Custom routing

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

添加自定义路由

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

使用路由器配置

使用 router options，您可以选择使用接受扫描路由并返回自定义路由的函数来覆盖或扩展您的路由。

如果它返回 null 或 undefined，Nuxt 将回退到默认路由(对修改输入数组很有用)。

app/router.options.ts
js
import type { RouterConfig } from '@nuxt/schema'

// /docs/vue-router/api/interfaces/routeroptions
export default <RouterConfig> {
  routes: (_routes) => [
    {
      name: 'home',
      path: '/',
      component: () => import('~/pages/home.vue').then(r => r.default || r)
    }
  ],
}

Nuxt 不会使用您提供的组件的definePageMeta中定义的元数据来增加您从routes函数返回的任何新路由。
如果您希望发生这种情况，您应该使用 在构建时调用 的 pages:extend 钩子。

使用pages:extend钩子

您可以使用 pages:extend nuxt 钩子从扫描的路由中添加、更改或删除页面。 例如，要防止为任何 .ts 文件创建路由：

nuxt.config.ts
ts
export default defineNuxtConfig({
  hooks: {
    'pages:extend': function (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 = []
        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 kit 提供了几种添加路由的方法：

  • extendPages (callback: pages => void)
  • extendRouteRules(route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)

路由器选项

可以自定义 vue-router 选项。

使用 app/router.options

可以自定义 vue-router 选项。

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

app/router.options.ts
js
import type { RouterConfig } from '@nuxt/schema'

// /docs/vue-router/api/interfaces/routeroptions
export default <RouterConfig> {
}

Using nuxt.config

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

  • linkActiveClass
  • linkExactActiveClass
  • end
  • sensitive
  • strict
  • hashMode
nuxt.config
js
export default defineNuxtConfig({
  router: {
    // /docs/vue-router/api/interfaces/routeroptions
    options: {}
  }
})

哈希模式(SPA)

您可以在 SPA 模式下启用哈希历史记录。 在此模式下，路由器在内部传递的实际 URL 之前使用哈希字符 (#)。
启用后，URL 永远不会发送到服务器并且**不支持 SSR。

nuxt.config.ts
ts
export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  }
})

自定义历史记录(高级)

您可以选择使用接受基本 URL 并返回历史模式的函数来覆盖历史模式。
如果它返回 null 或 undefined，Nuxt 将回退到默认历史记录。

app/router.options.ts
js
import type { RouterConfig } from '@nuxt/schema'
import { createMemoryHistory } from 'vue-router'

// /docs/vue-router/api/interfaces/routeroptions
export default <RouterConfig> {
  history: base => process.client ? createMemoryHistory(base) : null /* default */
}