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/'
}
}
base
estiver definido, o Nuxt também adicionará dentro do cabeçalho do documento o <base href="{{ router.base }}"/>
.Esta opção é dada diretamente ao
base
dovue-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
.
chunkNames
correspondente dos components
nomeados.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
dovue-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
dovue-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
dovue-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
ouArray
-
Itens:
String
-
Itens:
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
dovue-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
dovue-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.
prefetchLinks
esteja ativada.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
.
Desde a versão 2.9.0 do Nuxt, você pode usar um ficheiro para sobrescrever o scrollBehavior
do roteador, este ficheiro deve ser colocado dentro de ~/app/router.scrollBehavior.js
(Repare que: o nome do ficheiro é sensível a caixa dos caracteres se estiver executando no Windows).
router.scrollBehavior.js
deve estar dentro da pasta app
, a qual por sua vez está dentro da raiz do projeto.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
ouundefined
-
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
![Sébastien Chopin](/_nuxt/image/841744.png)
![Nazaré da Piedade](/_nuxt/image/d5c785.png)
![Nobu](/_nuxt/image/888ba6.png)
![川音리오](/_nuxt/image/345a82.png)
![Maciek Palmowski](/_nuxt/image/2bdab1.png)
![Nestor Vera](/_nuxt/image/b6ef28.png)
![Daniel Roe](/_nuxt/image/0786f3.png)
![Yue Yang](/_nuxt/image/40c994.png)
![Jeronimas](/_nuxt/image/ba9a98.png)
![Clément Ollivier](/_nuxt/image/77339c.png)
![Alexander Lichter](/_nuxt/image/073577.png)
![N3-rd](/_nuxt/image/20bdf5.png)
![Adrien Zaganelli](/_nuxt/image/c3f019.png)
![Mag](/_nuxt/image/1fe278.png)
![Stefan Huber](/_nuxt/image/c3653a.png)
![Olga Bulat](/_nuxt/image/e50af3.png)
![Paiva](/_nuxt/image/ea02f0.png)
![Florian Reuschel](/_nuxt/image/ee31ca.png)
![Savas Vedova](/_nuxt/image/d403a7.png)
![HIJACK](/_nuxt/image/add3e2.png)
![Vinícius Alves](/_nuxt/image/ba75e5.png)
![Kareem Dabbeet](/_nuxt/image/c79dfa.png)
![Valentín Costa](/_nuxt/image/3dd0d7.png)
![Ryan Skinner](/_nuxt/image/ec2d86.png)
![Alex Hirzel](/_nuxt/image/980fb6.png)
![Ajeet Chaulagain](/_nuxt/image/2fb9d1.png)
![René Eschke](/_nuxt/image/ddfbaa.png)
![Nico Devs](/_nuxt/image/5fa1fe.png)
![Muhammad](/_nuxt/image/76bed9.png)
![Naoki Hamada](/_nuxt/image/475300.png)
![Tom](/_nuxt/image/aae9cc.png)
![Yann Aufray](/_nuxt/image/305a71.png)
![Anthony Chu](/_nuxt/image/027d85.png)
![Nuzhat Minhaz](/_nuxt/image/431077.png)
![Lucas Portet](/_nuxt/image/260cbe.png)
![Richard Schloss](/_nuxt/image/7f63ae.png)
![Bobby](/_nuxt/image/42cdae.png)
![bpy](/_nuxt/image/ecc096.png)
![Antony Konstantinidis](/_nuxt/image/1434b0.png)
![Hibariya](/_nuxt/image/febb5a.png)
![Jose Seabra](/_nuxt/image/ede04e.png)
![Eze](/_nuxt/image/f22c13.png)
![Florian Lefebvre](/_nuxt/image/e3705e.png)
![Lucas Recoaro](/_nuxt/image/8cdc5c.png)
![Julien SEIXAS](/_nuxt/image/40a795.png)