A propriedade router

A propriedade router permite você personalizar o roteador do Nuxt. (vue-router ).

A propriedade base

• Tipo: String
• Valor padrão: '/'

A base da URL da aplicação. Por exemplo, se aplicação de página única inteira for servida debaixo de /app/, então a base deve usar o valor '/app/'.

Isto pode ser útil se você precisar servir o Nuxt como uma raiz de contexto diferente, a partir de dentro de um sítio maior na teia de computadores. Repare que você pode, ou não definir um Servidor de Procuração de Rede Frontal (Front Proxy Web Server).

Se você quiser ter um redirecionamento para o router.base, você pode fazer isso usando um Gatilho, consulte o Redirecionar para router.base quando não estiver na raiz .

Desde a versão 2.15 do Nuxt, a mudança do valor desta propriedade em tempo de execução sobrescreverá a configuração de uma aplicação que já foi construída.

export default {
  router: {
    base: '/app/'
  }
}

Esta opção é dada diretamente ao base do vue-router.

A propriedade routeNameSplitter

• Tipo: String
• Valor padrão: '-'

Você pode querer mudar o separador entre os nomes de rota que o Nuxt usa. Você pode fazer isso através da opção routerNameSplitter dentro do seu ficheiro de configuração. Imagina que nós temos um ficheiro de página pages/posts/_id.vue. O Nuxt gerará o nome da rota programaticamente, neste caso o posts-id. Mudando a configuração do routerNameSplitter para / o nome mudará então para posts/id.

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

A propriedade extendRoutes

• Tipo: Function

Você pode querer estender as rotas criadas pelo Nuxt. Você pode fazer isso através da opção extendRoutes.

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

Se você quiser organizar as suas rotas, você pode usar a função sortRoutes(routes) do módulo @nuxt/utils:

import { sortRoutes } from '@nuxt/utils'
export default {
  router: {
    extendRoutes(routes, resolve) {
      // Adicione algumas rotas aqui...

      // e depois organize elas
      sortRoutes(routes)
    }
  }
}

O estrutura da rota deve respeitar o estrutura do vue-router .

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/users/:id',
        components: {
          default: resolve(__dirname, 'pages/users'), // ou routes[index].component
          modal: resolve(__dirname, 'components/modal.vue')
        },
        chunkNames: {
          modal: 'components/modal'
        }
      })
    }
  }
}

A propriedade fallback

• Tipo: boolean
• Valor padrão: false

Controla se a roteador deve recuar para o modo de hash quando o navegador não suporta o modo histórico. Empurra o estado mas o modo é definido para histórico.

Definindo isto para false essencialmente faz um recarregamento completo da página em toda navegação do router-link no Internet Explorer 9. Isto é útil quando a aplicação é renderizada no servidor e precisa funcionar no Internet Explorer 9, porque o modo de hash da URL não funciona com a Renderização no Lado do Servidor.

Esta opção é dada diretamente ao fallback do vue-router.

A propriedade linkActiveClass

• Tipo: String
• Valor padrão: 'nuxt-link-active'

Configura globalmente a classe ativa padrão do componente <nuxt-link> .

export default {
  router: {
    linkActiveClass: 'active-link'
  }
}

Esta opção é dada diretamente ao linkActiveClass do vue-router.

A propriedade linkExactActiveClass

• Tipo: String
• Valor padrão: 'nuxt-link-exact-active'

Configura globalmente a classe ativa exata padrão do componente <nuxt-link> .

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

Esta opção é dada diretamente ao linkExactActiveClass do vue-router.

A propriedade linkPrefetchedClass

• Tipo: String
• Valor padrão: false

Configura globalmente a classe de pré-requisição padrão do componente <nuxt-link> (funcionalidade desativada por padrão).

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

A propriedade middleware

• Tipo: String ou Array
  • Itens: String

Define o(s) intermediário(s) padrão para cada página da aplicação.

export default {
  router: {
    // Executa o middleware/user-agent.js em cada página
    middleware: 'user-agent'
  }
}

export default function (context) {
  // Adiciona a propriedade `userAgent` dentro do contexto (disponível dentro do gatilho `asyncData` e `fetch`)
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

Para saber mais sobre o intermediário, consulte o guia do intermédiario .

A propriedade mode

• Tipo: String
• Valor padrão: 'history'

Configura o modo do roteador, não é recomendado mudar ele por causa da renderização no lado do servidor.

export default {
  router: {
    mode: 'hash'
  }
}

Esta opção é dada diretamente ao mode do vue-router.

A propriedade parseQuery / stringifyQuery

• Tipo: Function

Fornece analise personalizada de sequência de caracteres de consulta / transforma funções em sequências de caracteres. Sobrescreve o valor padrão.

Esta opção é dada diretamente ao parseQuery / stringifyQuery do vue-router.

A propriedade prefetchLinks

Adicionada com a versão 2.4.0 do Nuxt

• Tipo: Boolean
• Valor padrão: true

Configura o componente <nuxt-link> para pré-requisitar o código separado da página quando detetado dentro da janela de visualização. Requer o IntersectionObserver para ser suportado (consulte o CanIUse ).

Nós recomendamos condicionalmente preencher esta funcionalidade com um serviço como o Polyfill.io :

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

Para desativar a pré-requisição em uma ligação específica, você pode usar o atributo no-prefetch. Desde a versão 2.10.0 do Nuxt, você pode também usar o atributo prefetch para definir para false:

<nuxt-link to="/about" no-prefetch>About page not prefetched</nuxt-link>
<nuxt-link to="/about" :prefetch="false">About page not prefetched</nuxt-link>

Para desativar a pré-requisição em todas as ligações, defina a propriedade prefetchLinks para false:

export default {
  router: {
    prefetchLinks: false
  }
}

Desde a versão 2.10.0 do Nuxt, se você tiver o prefetchLinks definido como false mas você quer pré-requisitar uma ligação específica, você pode usar o atributo prefetch:

<nuxt-link to="/about" prefetch>About page prefetched</nuxt-link>

A propriedade prefetchPayloads

Adicionada com a versão 2.13.0 do Nuxt, apenas disponível para o alvo estático .

• Tipo: Boolean
• Valor padrão: true

Quando usar o comando nuxt generate com o target: 'static', o Nuxt gerará um ficheiro payload.js para cada página.

Com esta opção ativada, o Nuxt pré-requisitará automaticamente o payload da página ligada quando o componente <nuxt-link> estiver visível dentro da janela de visualização, tornando a navegação instantânea.

Você pode desativar este comportamento ao definir prefetchPaylods para false:

export default {
  router: {
    prefetchPayloads: false
  }
}

A propriedade scrollBehavior

• Tipo: Function

A opção scrollBehavior permite você definir um comportamento personalizado para a posição da rolagem entre as rotas. Este método é chamado toda vez que uma página é renderizada. Para saber mais sobre ele, consulte a documentação do scrollBehavior do vue-router .

Você pode consultar o ficheiro router.scrollBehavior.js padrão do Nuxt aqui: packages/vue-app/template/router.scrollBehavior.js .

Exemplo de forçamento da posição da rolagem ao topo para todas as rotas:

app/router.scrollBehavior.js

export default function (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

A propriedade trailingSlash

• Tipo: Boolean ou undefined
• Valor padrão: undefined
• Disponível desde versão: 2.10

Se esta opção estiver definida para true, rastos de barras serão acrescentados à cada rota. Se estiver definida para false, os rastos de barras serão removidos.

Atenção: Esta opção não deve ser definida sem preparação e tem de ser testada cuidadosamente. Quando estiver definindo router.trailingSlash para alguma coisa diferente de undefined, a rota oposta parará de funcionar. Assim os redirecionamentos de 301 deve estar no lugar e a sua ligação interna tem de estar corretamente adaptada. Se você definir a propriedade trailingSlash para true, então apenas o example.com/abc/ funcionará mas não o example.com/abc. Se você definir para false, será o contrário.

Exemplo do comportamento (com as rotas filhas)

Para um diretório com esta estrutura:

-| pages/
---| index.vue
---| posts.vue
---| posts/
-----| _slug.vue
-----| index.vue

Este é o comportamento para cada possível definição da propriedade trailingSlash:

Route           Page
/               ~/pages/index.vue
/posts          ~/pages/posts.vue (parent) + ~/pages/posts.vue (child route)
/posts/         ~/pages/posts.vue (parent) + ~/pages/posts.vue (child route)
/posts/foo      ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)
/posts/foo/     ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)

Route           Page
/               ~/pages/index.vue
/posts          404
/posts/         ~/pages/posts.vue (parent) + ~/pages/index.vue (child route)
/posts/foo      404
/posts/foo/     ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)

Route           Page
/               ~/pages/index.vue
/posts          ~/pages/posts.vue
/posts/         ~/pages/posts.vue (parent) + ~/pages/index.vue (child route)
/posts/foo      ~/pages/posts.vue (parent) + ~/pages/_slug.vue (child route)
/posts/foo/     404