router 属性配置

router 属性让你可以个性化配置 Nuxt.js 应用的路由（vue-router）。

base

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

应用的根URL。举个例子，如果整个单页面应用的所有资源可以通过 /app/ 来访问，那么 base 配置项的值需要设置为 '/app/'。

例如 (nuxt.config.js)：

  1. module.exports = {
  2.   router: {
  3.     base: '/app/'
  4.   }
  5. }

base 被设置后，Nuxt.js 会自动将它添加至页面中： <base href="{{ router.base }}"/>。

该配置项的值会被直接传给 vue-router 的构造器。

mode

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

配置路由的模式，鉴于服务端渲染的特性，不建议修改该配置。

示例 (nuxt.config.js):

  1. module.exports = {
  2.   router: {
  3.     mode: 'hash'
  4.   }
  5. }

该配置项的值会被直接传给 vue-router 的构造器。

linkActiveClass

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

全局配置 <nuxt-link> 组件默认的激活类名。

例如 (nuxt.config.js)：

  1. module.exports = {
  2.   router: {
  3.     linkActiveClass: 'active-link'
  4.   }
  5. }

该配置项的值会被直接传给 vue-router 的构造器。

scrollBehavior

  • 类型： Function

scrollBehavior 配置项用于个性化配置跳转至目标页面后的页面滚动位置。每次页面渲染后都会调用 scrollBehavior 配置的方法。

scrollBehavior 的默认配置为：

  1. const scrollBehavior = (to, from, savedPosition) => {
  2.   // savedPosition 只有在 popstate 导航（如按浏览器的返回按钮）时可以获取。
  3.   if (savedPosition) {
  4.     return savedPosition
  5.   } else {
  6.     let position = {}
  7.     // 目标页面子组件少于两个
  8.     if (to.matched.length < 2) {
  9.       // 滚动至页面顶部
  10.       position = { x: 0, y: 0 }
  11.     }
  12.     else if (to.matched.some((r) => r.components.default.options.scrollToTop)) {
  13.       // 如果目标页面子组件中存在配置了scrollToTop为true
  14.       position = { x: 0, y: 0 }
  15.     }
  16.     // 如果目标页面的url有锚点,  则滚动至锚点所在的位置
  17.     if (to.hash) {
  18.       position = { selector: to.hash }
  19.     }
  20.     return position
  21.   }
  22. }

举个例子，我们可以配置所有页面渲染后滚动至顶部：

nuxt.config.js：

  1. module.exports = {
  2.   router: {
  3.     scrollBehavior: function (to, from, savedPosition) {
  4.       return { x: 0, y: 0 }
  5.     }
  6.   }
  7. }

该配置项的值会被直接传给 vue-router 的构造器。

middleware

  • 类型： String 或 Array
    • 数值元素类型: String

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

例如：

nuxt.config.js

  1. module.exports = {
  2.   router: {
  3.     // 在每页渲染前运行 middleware/user-agent.js 中间件的逻辑
  4.     middleware: 'user-agent'
  5.   }
  6. }

middleware/user-agent.js

  1. export default function (context) {
  2.   // 给上下文对象增加 userAgent 属性（增加的属性可在 `asyncData` 和 `fetch` 方法中获取）
  3.   context.userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent
  4. }

了解更多关于中间件的信息，请参考 中间件指引文档。

extendRoutes

  • 类型： Function

你可以通过 extendRoutes 配置项来扩展 Nuxt.js 生成的路由配置。

举个例子，我们添加一个自定义的路由配置：

nuxt.config.js：

  1. const resolve = require('path').resolve
  3. module.exports = {
  4.   router: {
  5.     extendRoutes (routes) {
  6.       routes.push({
  7.         name: 'custom',
  8.         path: '*',
  9.         component: resolve(__dirname, 'pages/404.vue')
  10.       })
  11.     }
  12.   }
  13. }

上述例子中路由配置对象的键请参考 vue-router 文档中的说明。