Nuxt.js router 屬性配置

router 屬性配置

router 屬性讓你可以個性化配置 Nuxt.js 應(yīng)用的路由（vue-router）

base

• 類型： String
• 默認值： '/'

應(yīng)用的根URL。舉個例子，如果整個單頁面應(yīng)用的所有資源可以通過 /app/ 來訪問，那么 base 配置項的值需要設(shè)置為 '/app/'。

例如 (nuxt.config.js)：

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

base 被設(shè)置后，Nuxt.js 會自動將它添加至頁面中： <base href="{{ router.base }}"/>。

該配置項的值會被直接傳給 vue-router 的構(gòu)造器。

routeNameSplitter

• 類型: String
• 默認: '-'

您可能希望更改Nuxt.js使用的路由名稱之間的分隔符。您可以通過配置文件中的routeNameSplitter選項執(zhí)行此操作。想象一下，我們有頁面文件pages/posts/_id.vue。Nuxt將以編程方式生成路由名稱，在本例中為posts-id。因此，將routeNameSplitter配置修改為/，這樣路由名稱生成為posts/id。

例如 (nuxt.config.js):

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

extendRoutes

• 類型: Function

您可能希望擴展Nuxt.js創(chuàng)建的路由。您可以通過extendRoutes選項執(zhí)行此操作。

例如添加自定義路由:

nuxt.config.js

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

路由的模式應(yīng)該遵循vue-router模式。

linkActiveClass

• 類型： String
• 默認值： 'nuxt-link-active'

全局配置 <nuxt-link> 組件默認的激活類名。

例如 (nuxt.config.js)：

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

該配置項的值會被直接傳給 vue-router 的構(gòu)造器。

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數(shù)值元素類型: String

為應(yīng)用的每個頁面設(shè)置默認的中間件。

例如：

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
}

了解更多關(guān)于中間件的信息，請參考 中間件指引文檔。

mode

• 類型：String
• 默認值：'history'

配置路由的模式，鑒于服務(wù)端渲染的特性，不建議修改該配置。

示例 (nuxt.config.js):

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

該配置項的值會被直接傳給 vue-router 的構(gòu)造器。

scrollBehavior

• 類型： Function

scrollBehavior 配置項用于個性化配置跳轉(zhuǎn)至目標頁面后的頁面滾動位置。每次頁面渲染后都會調(diào)用 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 的構(gòu)造器。

parseQuery / stringifyQuery

• 類型: Function

提供自定義查詢字符串解析/字符串化功能。覆蓋默認值。

此選項直接提供在vue-router parseQuery / stringifyQuery.

prefetchLinks

Nuxt v2.4.0 添加

• 類型: Boolean
• 默認: true

在視圖中檢測到時，配置<nuxt-link>用來預(yù)獲取代碼分割頁面。需要支持IntersectionObserver(參閱 CanIUse)。

我們建議使用Polyfill.io等服務(wù)有條件地填充此功能：

nuxt.config.js

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

要禁用特定鏈接上的預(yù)取，可以使用no-prefetch 屬性：

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

要全局禁用所有鏈接上的預(yù)取，請將prefetchLinks設(shè)置為false：

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

fallback

• 類型: boolean
• 默認: false

當(dāng)瀏覽器不支持history.pushState但模式設(shè)置為history時，控制路由器是否應(yīng)回退。

將此設(shè)置為false實質(zhì)上會使每個路由器鏈接導(dǎo)航在IE9中刷新整頁。當(dāng)應(yīng)用程序是服務(wù)器呈現(xiàn)并且需要在IE9中工作時，這很有用，因為hash模式URL不適用于SSR。

此選項直接提供在vue-router fallback.