路由器属性

路由器属性允许您自定义Nuxt.js路由器(Vue-Router.)。

根据

  • 类型:细绳
  • 默认:'/'

应用程序的基本URL。例如,如果提供整个单页应用程序/应用程序/然后基数应该使用该值'/应用程序/'

如果您需要在更大的网站内需要将NUXT服务于不同的上下文根目录,这可能很有用。请注意,您可以或可能无法设置前代理Web服务器。

如果你想重定向到router.base.,你可以这样做使用钩子,看未在root上重定向到路由器.Base

在Nuxt 2.15+中,在运行时更改此属性的值将覆盖已构建的应用程序的配置。

nuxt.config.js.
出口默认{路由器{根据'/应用程序/'}}

什么时候根据已设置,Nuxt.js还将在文档标题中添加

此选项直接给予Vue-Router根据

Routenamesplitter

  • 类型:细绳
  • 默认:' - '

您可能希望更改Nuxt.js使用的路由名称之间的分隔符。你可以通过这么做Routenamesplitter配置文件中的选项。想象一下我们有页面文件页面/ posts / _id.vue。在这种情况下,Nuxt会以编程方式生成路线名称帖子ID.。改变这一点Routenamesplitter配置为/因此,这个名字将改变为帖子/ id

nuxt.config.js.
出口默认{路由器{Routenamesplitter'/'}}

延伸

  • 类型:功能

您可能希望扩展Nuxt.js创建的路由。你可以通过这么做延伸选项。

nuxt.config.js.
出口默认{路由器{延伸路线解决{路线{名称'风俗'小路'*'成分解决__dirname.'页面/ 404.vue'}}}}

如果要对路线进行排序,可以使用排队(路线)功能从@ nuxt / utils

nuxt.config.js.
进口{排队}'@ nuxt / utils'出口默认{路由器{延伸路线解决{//在这里添加一些路线......//然后对它们排序排队路线}}}

该路线的架构应该尊重Vue-Router.架构。

添加使用命名视图的路由时,不要忘记添加相应的Chunnnames.命名为组件

nuxt.config.js.
出口默认{路由器{延伸路线解决{路线{小路'/用户/:ID'组件{默认解决__dirname.'页面/用户'//或路由[index] .component莫代尔解决__dirname.'组件/ modal.vue'}Chunnnames.{莫代尔'组件/模态'}}}}}

倒退

  • 类型:布尔基
  • 默认:错误的

当浏览器不支持历史记录时,控制路由器是否应该回退到哈希模式.Pushstate但模式设置为历史记录。

将此设置为false基本上使每个路由器链接导航在IE9中刷新完整页面刷新。当应用程序是服务器呈现并且需要在IE9中工作时,这很有用,因为哈希模式URL不适用于SSR。

此选项直接给予Vue-Router倒退

linkActiveclass.

  • 类型:细绳
  • 默认:'nuxt-link-active'

全球配置默认活动类。

nuxt.config.js.
出口默认{路由器{linkActiveclass.'active-link'}}

此选项直接给予Vue-RouterlinkActiveclass.

linkexactactiveclass.

  • 类型:细绳
  • 默认:'nuxt-link-comple-active'

全球配置默认精确的活动类。

nuxt.config.js.
出口默认{路由器{linkexactactiveclass.'Exact-Active-Link'}}

此选项直接给予Vue-Routerlinkexactactiveclass.

linkprefetchedclass.

  • 类型:细绳
  • 默认:错误的

全球配置默认预取级别(默认禁用功能)

nuxt.config.js.
出口默认{路由器{linkprefetchedclass.'nuxt-link-prefetched'}}

中间件

  • 类型:细绳或者大批
    • 项目:细绳

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

nuxt.config.js.
出口默认{路由器{//在每个页面上运行中间件/用户agent.js中间件'用户代理'}}
中间件/用户agent.js
出口默认功能语境{//在上下文中添加userAgent属性(以`asyncdata`和`fetch`提供)语境用户代理=过程服务器语境标题['用户代理']航海家用户代理}

要了解更多关于中间件的信息,请参阅中间件指南

模式

  • 类型:细绳
  • 默认:'历史'

配置路由器模式,不建议使用服务器端呈现,以便更改它。

nuxt.config.js.
出口默认{路由器{模式'哈希'}}

此选项直接给予Vue-Router模式

Parsepery / stryifyquery.

  • 类型:功能

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

此选项直接给予Vue-RouterParsepery / stryifyquery.

添加了nuxt v2.4.0

  • 类型:布尔基
  • 默认:真的

配置预取代码夹在视口中检测到的页面。需要ittersectobserver被支持(见我可以用吗)。

我们建议使用像这样的服务有条件地完成此功能polyfill.io.

nuxt.config.js.
出口默认{{脚本[{SRC.'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'身体真的}]}}

要禁用特定链接上的预取,您可以使用没有预取支柱。自umxt.js v2.10.0以来,您也可以使用预取支柱设置为错误的

<NUXT-LINK.=/关于没有预取>关于页面未预取NUXT-LINK.><NUXT-LINK.=/关于:预取=错误的>关于页面未预取NUXT-LINK.>

要禁用所有链接上的预取,请设置prefetchlinks.错误的

nuxt.config.js.
出口默认{路由器{prefetchlinks.错误的}}

自从nuxt.js v2.10.0,如果您已设置prefetchlinks.错误的但是你想预取一个特定的链接,你可以使用预取支柱:

<NUXT-LINK.=/关于预取>关于页面已预取NUXT-LINK.>

预取淘汰

添加V2.13.0,仅适用于静态目标

  • 类型:布尔基
  • 默认:真的

使用时nuxt生成目标:'静态',nuxt会产生一个payload.js.对于每个页面。

启用此选项后,NUXT将自动预取链页的有效载荷在视口中可见,制作即时导航

此选项取决于prefetchlinks.选择要启用。

您可以通过设置禁用此行为预取淘汰错误的

nuxt.config.js.
出口默认{路由器{预取淘汰错误的}}

scrollbehavior.

  • 类型:功能

scrollbehavior.选项允许您为路由之间的滚动位置定义自定义行为。每次呈现页面时都会调用此方法。要了解更多信息,请参阅Vue-Router Scrollbehavior文档

从V2.9.0开始,您可以使用文件覆盖路由器滚动留言,此文件应放入〜/ app / router.scrollbehavior.js(注意:如果在Windows上运行,文件名是区分大小写的。

您可以看到Nuxt默认值router.scrollbehavior.js.文件在这里:包/ Vue-app / template / router.scrollbehavior.js

为每条路由强制滚动位置到顶部的示例:

app / router.scrollbehavior.js.

app / router.scrollbehavior.js.
出口默认功能撒娇{返回{X0.y0.}}

trailinglash.

  • 类型:布尔基或者不明确的
  • 默认:不明确的
  • 自如下:v2.10以来

如果此选项设置为TRUE,则将追踪斜杠将附加到每条路由。如果设置为false,则会被删除。

注意力:不应设定此选项而不准备,并且必须彻底测试。设置时router.trairingslash.到其他东西不明确的,相反的路线将停止工作。因此,301重定向应该到位和你的内部链接必须正确调整。如果你设置了trailinglash.真的,那么example.com/abc/会工作但不是example.com/abc.。在虚假,它反之亦然

示例行为(使用子路线)

对于具有此结构的目录:

-|页面/ ---|index.vue ---|帖子---|帖子/ -----|_slug.vue -----|index.vue.

这是每个可能的设置的行为trailinglash.

路由页面/〜/ pages / index.vue / posts〜/ pages / posts.vue父母+〜/页面/ posts.vue儿童路线/ posts /〜/ pages / posts.vue父母+〜/页面/ posts.vue儿童路线/ posts / foo〜/ pages / posts.vue父母+〜/ pages / _slug.vue儿童路线/ posts / foo /〜/ pages / posts.vue父母+〜/ pages / _slug.vue儿童路线
路由页面/〜/ pages / index.vue / posts404./ posts /〜/ pages / posts.vue父母+〜/ pages / index.vue儿童路线/帖子/ foo404./ posts / foo /〜/ pages / posts.vue父母+〜/ pages / _slug.vue儿童路线
路由页面/〜/ pages / index.vue / posts〜/ pages / posts.vue / posts /〜/ pages / posts.vue父母+〜/ pages / index.vue儿童路线/ posts / foo〜/ pages / posts.vue父母+〜/ pages / _slug.vue儿童路线/帖子/ foo /404.