API router属性
router 属性配置
router 属性让你可以个性化配置 Nuxt.js 应用的路由(vue-router)。
base
类型: String
默认值: '/'
应用的根URL。举个例子,如果整个单页面应用的所有资源可以通过 /app/ 来访问,那么 base 配置项的值需要设置为 '/app/'。
例如 (nuxt.config.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.config.js):
export default { router: { routeNameSplitter: '/' } }
extendRoutes
类型: Function
您可能希望扩展Nuxt.js创建的路由。您可以通过extendRoutes选项执行此操作。
例如添加自定义路由:
nuxt.config.js
export default { router: { extendRoutes (routes, resolve) { routes.push({ name: 'custom', path: '*', component: resolve(__dirname, 'pages/404.vue') }) } } }
路由的模式应该遵循vue-router模式。
linkActiveClass
类型: String
默认值: 'nuxt-link-active'
全局配置 <nuxt-link> 组件默认的激活类名。
例如 (nuxt.config.js):
module.exports = { router: { linkActiveClass: 'active-link' } }
该配置项的值会被直接传给 vue-router 的构造器。
linkExactActiveClass
类型: String
默认: 'nuxt-link-exact-active'
全局配置 <nuxt-link> 默认的active class。
例如 (nuxt.config.js):
export default { router: { linkExactActiveClass: 'exact-active-link' } }
此选项直接提供给vue-router linkexactactiveclass.
linkPrefetchedClass
类型: String
默认: false
全局配置<nuxt-link>默认值(默认情况下禁用功能)
例子 (nuxt.config.js):
export default { router: { linkPrefetchedClass: 'nuxt-link-prefetched' } }
middleware
类型: String 或 Array
数值元素类型: String
为应用的每个页面设置默认的中间件。
例如:
nuxt.config.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.config.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.matched.some(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('Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).') } } resolve(position) }) }) }
举个例子,我们可以配置所有页面渲染后滚动至顶部:
nuxt.config.js:
module.exports = { router: { scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } } }
该配置项的值会被直接传给 vue-router 的构造器。
parseQuery / stringifyQuery
类型: Function
提供自定义查询字符串解析/字符串化功能。覆盖默认值。
此选项直接提供在vue-router parseQuery / stringifyQuery.
prefetchLinks
Nuxt v2.4.0 添加
类型: Boolean
默认: true
在视图中检测到时,配置<nuxt-link>用来预获取代码分割页面。需要支持IntersectionObserver(参阅 CanIUse)。
我们建议使用Polyfill.io等服务有条件地填充此功能:
nuxt.config.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.config.js export default { router: { prefetchLinks: false } }
fallback
类型: boolean
默认: false
当浏览器不支持history.pushState但模式设置为history时,控制路由器是否应回退。
将此设置为false实质上会使每个路由器链接导航在IE9中刷新整页。当应用程序是服务器呈现并且需要在IE9中工作时,这很有用,因为hash模式URL不适用于SSR。
此选项直接提供在vue-router fallback.