router 配置

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

base

类型： String

认值： '/'

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

例如 (nuxt.con.js)：

module.exports = {
  router: {
    base: '/app/'
  }
}

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

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

routeNameSplitter

类型: String

认: '-'

您可能希望更改Nuxt.js使用的路由之分隔符。您可以通过中的routeNameSplitter选项执行此操作。想象一下，我们有pages/posts/_id.vue。Nuxt将以编程方式路由，在本例中为posts-id。因此，将routeNameSplitter配置为/，这样路由为posts/id。

例如 (nuxt.con.js):

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

extendRoutes

类型: Function

您可能希望扩展Nuxt.js创建的路由。您可以通过extendRoutes选项执行此操作。

例如路由:

nuxt.con.js

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

路由的模式应该遵循模式。

linkActiveClass

类型： String

认值： 'nuxt-link-active'

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

例如 (nuxt.con.js)：

module.exports = {
  router: {
    linkActiveClass: 'active-link'
  }
}

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

linkExactActiveClass

类型: String

认: 'nuxt-link-exact-active'

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

例如 (nuxt.con.js):

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

此选项直接提供给vue-router .

linkPrefetchedClass

类型: String

认: false

全局配置<nuxt-link>认值(认情况下禁用)

例子 (nuxt.con.js):

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

middleware

类型： String 或 Array

数值元素类型: String

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

例如：

nuxt.con.js

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

middleware/user-agent.js

export default function (context) {
  // 给上下文对象 userAgent （的可在 `asyncData` 和 `fetch` 中）
  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

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

mode

类型：String

认值：'history'

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

示例 (nuxt.con.js):

module.exports = {
  router: {
    mode: 'hash'
  }
}

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

scrollBehavior

类型： Function

scrollBehavior 配置项用于个性化配置至目标后的滚动位置。每次渲染后都会 scrollBehavior 配置的。

scrollBehavior 的认配置为：

const scrollBehavior = function (to, from, savedPosition) {
  // if the returned position is falsy or an empty object,
  // will retain current scroll position.
  let position = false

  // if no children detected and scrollToTop is not explicitly disabled
  if (
    to.matched.length < 2 &&
    to.matched.every(r => r.components.default.options.scrollToTop !== false)
  ) {
    // scroll to the top of the page
    position = { x: 0, y: 0 }
  } else if (to.matchedme(r => r.components.default.options.scrollToTop)) {
    // if one of the children has scrollToTop option set to true
    position = { x: 0, y: 0 }
  }

  // savedPosition is only available for popstate navigations (back button)
  if (savedPosition) {
    position = savedPosition
  }

  return new Promise((resolve) => {
    // wait for the out transition to complete (if necessary)
    window.$nuxt.$once('triggerScroll', () => {
      // coords will be used if no selector is provided,
      // or if the selector didn't match any element.
      if (to.hash) {
        let hash = to.hash
        // CSS.escape() is not supported with IE and Edge.
        if (typeof window.CSS !== 'undefined' && typeof window.CSS.escape !== 'undefined') {
          hash = '#' + window.CSS.escape(hash.substr(1))
        }
        try {
          if (document.querySelector(hash)) {
            // scroll to anchor by returning the selector
            position = { selector: hash }
          }
        } catch (e) {
          console.warn(' to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).')
        }
      }
      resolve(position)
    })
  })
}

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

nuxt.con.js：

module.exports = {
  router: {
    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
  }
}

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

parseQuery / stringifyQuery

类型: Function

提供字符串解析/字符串化。覆盖认值。

此选项直接提供在vue-router .

prefetchLinks

Nuxt v2.4.0

类型: Boolean

认: true

在视图中检测到时，配置<nuxt-link>用来预分割。需要(参阅 )。

我们建议使用等服务有条件地填充此：

nuxt.con.js

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

要禁用特定上的预取，可以使用no-prefetch ：

<nuxt-link to="/about" no-prefetch>About page not pre-fetched</nuxt-link>

要全局禁用所有上的预取，请将prefetchLinks设置为false：

// nuxt.con.js
export default {
  router: {
    prefetchLinks: false
  }
}

fallback

类型: boolean

认: false

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

将此设置为false实质上会使每个路由器导航在IE9中刷新整页。当应用程序是服务器呈现并且需要在IE9中工作时，这很有用，因为hash模式URL不适用于SSR。

此选项直接提供在vue-router .