router 属性

使用 router 属性自定义 Nuxt 路由器（vue-router ）。

base

• 类型: String
• 默认值: '/'

应用程序的基础 URL。例如，如果整个单页应用程序都在 /app/ 下，则 base 值应为 '/app/'。

当需要在更大的网站中从不同的上下文根提供 Nuxt 时很有用。注意可以设置也可以不设置前端代理 Web 服务器。

如果想重定向到 router.base，可以使用钩子实现，参见_非根路径时重定向到 router.base_ 。

Nuxt v2.15 及以上，在运行时更改此属性的值会覆盖已构建应用程序的配置。

export default {
  router: {
    base: '/app/'
  }
}

此选项直接传递给 vue-router 的 base 。

routeNameSplitter

• 类型: String
• 默认值: '-'

可以通过配置文件中的 routeNameSplitter 选项更改 Nuxt 使用的路由名称分隔符。假设有页面文件 pages/posts/_id.vue，Nuxt 会以编程方式生成路由名称（此例为 posts-id）。将 routeNameSplitter 配置改为 / 后，路由名称会变为 posts/id。

export default {
  router: {
    routeNameSplitter: '/'
  }
}

extendRoutes

• 类型: Function

有时可能想扩展 Nuxt 创建的路由，可以通过 extendRoutes 选项实现。

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }
}

如果想对路由排序，可以使用 @nuxt/utils 的 sortRoutes(routes) 函数：

import { sortRoutes } from '@nuxt/utils'
export default {
  router: {
    extendRoutes(routes, resolve) {
      // 在此添加路由...

      // 然后排序
      sortRoutes(routes)
    }
  }
}

路由的 schema 应遵循 vue-router schema。

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/users/:id',
        components: {
          default: resolve(__dirname, 'pages/users'), // 或 routes[index].component
          modal: resolve(__dirname, 'components/modal.vue')
        },
        chunkNames: {
          modal: 'components/modal'
        }
      })
    }
  }
}

fallback

• 类型: boolean
• 默认值: false

控制当浏览器不支持 history.pushState 但模式设置为 history 时，路由器是否应回退到 hash 模式。

设为 false 时，基本上会使所有路由器链接导航在 IE9 中进行完整页面刷新。这在应用程序是服务端渲染且需要在 IE9 中工作时很有用，因为 hash 模式 URL 不适用于 SSR。

此选项直接传递给 vue-router 的 fallback 。

linkActiveClass

• 类型: String
• 默认值: 'nuxt-link-active'

全局设置 <nuxt-link> 的默认 active class。

export default {
  router: {
    linkActiveClass: 'active-link'
  }
}

此选项直接传递给 vue-router 的 linkActiveClass 。

linkExactActiveClass

• 类型: String
• 默认值: 'nuxt-link-exact-active'

全局设置 <nuxt-link> 的默认 active class。

export default {
  router: {
    linkExactActiveClass: 'exact-active-link'
  }
}

此选项直接传递给 vue-router 的 linkExactActiveClass 。

linkPrefetchedClass

• 类型: String
• 默认值: false

全局设置 <nuxt-link> 的 prefetch class（默认禁用此功能）。

export default {
  router: {
    linkPrefetchedClass: 'nuxt-link-prefetched'
  }
}

middleware

• 类型: String 或 Array
  • 元素: String

为应用程序的每个页面设置默认中间件。

export default {
  router: {
    // 在每个页面上运行 middleware/user-agent.js
    middleware: 'user-agent'
  }
}

export default function (context) {
  // 在 context 中添加 userAgent 属性（可在 `asyncData` 和 `fetch` 方法中使用）
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

要深入了解中间件，请参阅中间件文档 。

mode

• 类型: String
• 默认值: 'history'

配置路由模式，不建议为服务端渲染更改此设置。

export default {
  router: {
    mode: 'hash'
  }
}

此选项直接传递给 vue-router 的 mode 。

parseQuery / stringifyQuery

• 类型: Function

提供自定义查询字符串解析/序列化函数，覆盖默认值。

此选项直接传递给 vue-router 的 parseQuery / stringifyQuery 。

prefetchLinks

此功能在 Nuxt v2.4.0 中添加

• 类型: Boolean
• 默认值: true

配置 <nuxt-link> 在 viewport（浏览器可视区域）中检测到链接时预取_代码分割_页面。需要支持 IntersectionObserver （参见 Caniuse ）。

建议有条件地将此功能嵌入到 Polyfill.io 等服务中：

export default {
  head: {
    script: [
      {
        src:
          'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver',
        body: true
      }
    ]
  }
}

要在特定链接上禁用预取，可以使用 no-prefetch 属性。从 Nuxt v2.10.0 起，也可以使用 prefetch 属性（设为 false）：

<nuxt-link to="/about" no-prefetch>About page not prefetched</nuxt-link>
<nuxt-link to="/about" :prefetch="false">About page not prefetched</nuxt-link>

要在所有链接上禁用预取，请将 prefetchLinks 设为 false：

export default {
  router: {
    prefetchLinks: false
  }
}

从 Nuxt v2.10.0 起，如果将 prefetchLinks 设为 false 但想预取特定链接，可以使用 prefetch 属性：

<nuxt-link to="/about" prefetch>About page prefetched</nuxt-link>

prefetchPayloads

v2.13.0 添加的功能，仅适用于静态目标 。

• 类型: Boolean
• 默认值: true

使用 target: 'static' 配合 nuxt generate 时，Nuxt 会为每个页面生成 payload.js。

启用此选项后，当 <nuxt-link> 出现在 viewport 中时，Nuxt 会自动预取链接页面的 payload，创建即时导航。

可以通过设置 prefetchPayloads 为 false 来禁用：

export default {
  router: {
    prefetchPayloads: false
  }
}

scrollBehavior

• 类型: Function

使用 scrollBehavior 选项可以定义页面间滚动位置的自定义行为。每次页面渲染时都会调用此方法。详情请参阅 vue-router 滚动行为文档 。

Nuxt 默认的 router.scrollBehavior.js 文件位于：

packages/vue-app/template/router.scrollBehavior.js

强制所有路由滚动到顶部的示例：

app/router.scrollBehavior.js

export default function (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

trailingSlash

• 类型: Boolean 或 undefined
• 默认值: undefined
• 最低可用版本: v2.10

设为 true 时，所有路由都会添加尾部斜杠。设为 false 时，尾部斜杠会被删除。

注意：此选项不应在没有准备的情况下设置，需要进行彻底测试。将 router.trailingSlash 设为 undefined 以外的值时，相反的路由将停止工作。因此需要设置 301 重定向，并正确调整_内部链接_。如果将 trailingSlash 设为 true，则只有 example.com/abc/ 有效，example.com/abc 无效。设为 false 时则相反。

行为示例（含子路由）

目录结构：

-| pages/
---| index.vue
---| posts.vue
---| posts/
-----| _slug.vue
-----| index.vue

以下是各 trailingSlash 设置的行为：

Route           Page
/               ~/pages/index.vue
/posts          ~/pages/posts.vue (parent) + ~/pages/posts.vue (child route)
/posts/         ~/pages/posts.vue (parent) + ~/pages/posts.vue (child route)
/posts/foo      ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)
/posts/foo/     ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)

Route           Page
/               ~/pages/index.vue
/posts          404
/posts/         ~/pages/posts.vue (parent) + ~/pages/index.vue (child route)
/posts/foo      404
/posts/foo/     ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)

Route           Page
/               ~/pages/index.vue
/posts          ~/pages/posts.vue
/posts/         ~/pages/posts.vue (parent) + ~/pages/index.vue (child route)
/posts/foo      ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)
/posts/foo/     404