|
|
import{_ as a,c as i,ag as e,o as n}from"./chunks/framework.C1C4sYC0.js";const c=JSON.parse('{"title":"Roteamento","description":"","frontmatter":{"outline":"deep"},"headers":[],"relativePath":"pt/guide/routing.md","filePath":"pt/guide/routing.md","lastUpdated":1736537361000}'),t={name:"pt/guide/routing.md"};function p(l,s,r,o,d,h){return n(),i("div",null,s[0]||(s[0]=[e(`<h1 id="routing" tabindex="-1">Roteamento <a class="header-anchor" href="#routing" aria-label="Permalink to "Roteamento {#routing}""></a></h1><h2 id="file-based-routing" tabindex="-1">Roteamento baseado em Arquivos <a class="header-anchor" href="#file-based-routing" aria-label="Permalink to "Roteamento baseado em Arquivos {#file-based-routing}""></a></h2><p>VitePress utiliza roteamento baseado em arquivos, isso significa que as páginas HTML geradas são mapeadas da estrutura de diretórios dos arquivos fonte Markdown. Por exemplo, dada a seguinte estrutura de diretório:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ guide</span></span>
|
|
|
<span class="line"><span>│ ├─ getting-started.md</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>├─ index.md</span></span>
|
|
|
<span class="line"><span>└─ prologue.md</span></span></code></pre></div><p>As páginas HTML geradas serão:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>index.md --> /index.html (acessível por /)</span></span>
|
|
|
<span class="line"><span>prologue.md --> /prologue.html</span></span>
|
|
|
<span class="line"><span>guide/index.md --> /guide/index.html (acessível por /guide/)</span></span>
|
|
|
<span class="line"><span>guide/getting-started.md --> /guide/getting-started.html</span></span></code></pre></div><p>O HTML resultante pode ser hospedado em qualquer servidor web que possa servir arquivos estáticos.</p><h2 id="root-and-source-directory" tabindex="-1">Diretório Raiz e Fonte <a class="header-anchor" href="#root-and-source-directory" aria-label="Permalink to "Diretório Raiz e Fonte {#root-and-source-directory}""></a></h2><p>Existem dois conceitos importantes na estrutura de arquivos de um projeto VitePress: o <strong>diretório raiz</strong> e o <strong>diretório fonte</strong>.</p><h3 id="project-root" tabindex="-1">Diretório Raiz <a class="header-anchor" href="#project-root" aria-label="Permalink to "Diretório Raiz {#project-root}""></a></h3><p>O diretório raiz é onde o VitePress procura pelo diretório especial <code>.vitepress</code>. O diretório <code>.vitepress</code> é um local reservado para o arquivo de configuração do VitePress, o cache do servidor de desenvolvimento, o resultado da compilação e o código de personalização de tema opcional.</p><p>Ao executar <code>vitepress dev</code> ou <code>vitepress build</code> no terminal, VitePress usará o diretório atual como diretório raiz do projeto. Para especificar um subdiretório como raiz, é necessário passar o caminho relativo para o comando. Por exemplo, se o projeto VitePress estiver localizado em <code>./docs</code>, deve-se executar <code>vitepress dev docs</code>:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ docs # diretório raiz</span></span>
|
|
|
<span class="line"><span>│ ├─ .vitepress # diretório de configuração</span></span>
|
|
|
<span class="line"><span>│ ├─ getting-started.md</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>└─ ...</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">vitepress</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> docs</span></span></code></pre></div><p>Isso resultará no seguinte mapeamento da fonte para HTML:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>docs/index.md --> /index.html (acessível como /)</span></span>
|
|
|
<span class="line"><span>docs/getting-started.md --> /getting-started.html</span></span></code></pre></div><h3 id="source-directory" tabindex="-1">Diretório Fonte <a class="header-anchor" href="#source-directory" aria-label="Permalink to "Diretório Fonte {#source-directory}""></a></h3><p>O diretório fonte é onde seus arquivos fonte em Markdown estão. Por padrão, é o mesmo que o diretório raiz. No entanto, você pode configurá-lo por meio da opção de configuração <a href="./../reference/site-config#srcdir"><code>srcDir</code></a>.</p><p>A opção <code>srcDir</code> é resolvida em relação ao diretório raiz do projeto. Por exemplo, com <code>srcDir: 'src'</code>, sua estrutura de arquivos ficará assim:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>. # diretório raiz</span></span>
|
|
|
<span class="line"><span>├─ .vitepress # diretório de configuração</span></span>
|
|
|
<span class="line"><span>└─ src # diretório fonte</span></span>
|
|
|
<span class="line"><span> ├─ getting-started.md</span></span>
|
|
|
<span class="line"><span> └─ index.md</span></span></code></pre></div><p>O mapeamento resultante da fonte para HTML:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>src/index.md --> /index.html (acessível como /)</span></span>
|
|
|
<span class="line"><span>src/getting-started.md --> /getting-started.html</span></span></code></pre></div><h2 id="linking-between-pages" tabindex="-1">Links Entre Páginas <a class="header-anchor" href="#linking-between-pages" aria-label="Permalink to "Links Entre Páginas {#linking-between-pages}""></a></h2><p>Você pode usar tanto caminhos absolutos quanto relativos ao vincular páginas. Note que, embora ambas as extensões <code>.md</code> e <code>.html</code> funcionem, a prática recomendada é omitir as extensões de arquivo para que o VitePress possa gerar as URLs finais com base na sua configuração.</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Fazer --></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Getting Started</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./getting-started</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Getting Started</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">../guide/getting-started</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- Não Fazer --></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Getting Started</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./getting-started.md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Getting Started</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">./getting-started.html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>Saiba mais sobre a vinculação de ativos, como imagens, em <a href="./asset-handling">Manipulação de Ativos</a>.</p><h3 id="linking-to-non-vitepress-pages" tabindex="-1">Vinculação a Páginas Não VitePress <a class="header-anchor" href="#linking-to-non-vitepress-pages" aria-label="Permalink to "Vinculação a Páginas Não VitePress {#linking-to-non-vitepress-pages}""></a></h3><p>Se você deseja vincular a uma página em seu site que não é gerada pelo VitePress, será necessário usar a URL completa (abre em uma nova guia) ou especificar explicitamente o destino:</p><p><strong>Entrada</strong></p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Link para pure.html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">/pure.html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">){target="_self"}</span></span></code></pre></div><p><strong>Saída</strong></p><p><a href="/pure.html" target="_self">Link para pure.html</a></p><div class="tip custom-block"><p class="custom-block-title">Nota</p><p>Nos links Markdown, a <code>base</code> é automaticamente adicionada à URL. Isso significa que, se você deseja vincular a uma página fora da sua base, será necessário algo como <code>../../pure.html</code> no link (resolvido em relação à página atual pelo navegador).</p><p>Alternativamente, pode-se usar diretamente a sintaxe da tag âncora:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"/pure.html"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"_self"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Link para pure.html</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div><h2 id="generating-clean-url" tabindex="-1">Geração de URL Limpa <a class="header-anchor" href="#generating-clean-url" aria-label="Permalink to "Geração de URL Limpa {#generating-clean-url}""></a></h2><div class="warning custom-block"><p class="custom-block-title">Suporte do Servidor Necessário</p><p>Para servir URLs limpas com VitePress, é necessário suporte no lado do servidor.</p></div><p>Por padrão, VitePress resolve links de entrada para URLs que terminam com <code>.html</code>. No entanto, alguns usuários podem preferir "URLs limpas" sem a extensão <code>.html</code>, por exemplo, <code>example.com/caminho</code> em vez de <code>example.com/caminho.html</code>.</p><p>Alguns servidores ou plataformas de hospedagem (por exemplo, Netlify, Vercel, GitHub Pages) fornecem a habilidade de mapear uma URL como <code>/foo</code> para <code>/foo.html</code> se ela existir, sem redirecionamento:</p><ul><li>Netlify e GitHub Pages suportam isso por padrão.</li><li>Vercel requer a ativação da opção <a href="https://vercel.com/docs/concepts/projects/project-configuration#cleanurls" target="_blank" rel="noreferrer"><code>cleanUrls</code> no <code>vercel.json</code></a>.</li></ul><p>Se essa funcionalidade estiver disponível para você, também se pode ativar a própria opção de configuração <a href="./../reference/site-config#cleanurls"><code>cleanUrls</code></a> de VitePress para que:</p><ul><li>Links de entrada entre páginas sejam gerados sem a extensão <code>.html</code>.</li><li>Se o caminho atual terminar com <code>.html</code>, o roteador realizará um redirecionamento no lado do cliente para o caminho sem extensão.</li></ul><p>No entanto, se você não puder configurar o servidor com esse suporte, será necessário recorrer manualmente à seguinte estrutura de diretório:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ getting-started</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>├─ installation</span></span>
|
|
|
<span class="line"><span>│ └─ index.md</span></span>
|
|
|
<span class="line"><span>└─ index.md</span></span></code></pre></div><h1 id="route-rewrites" tabindex="-1">Reescrita de Rota <a class="header-anchor" href="#route-rewrites" aria-label="Permalink to "Reescrita de Rota {#route-rewrites}""></a></h1><p>Você pode personalizar o mapeamento entre a estrutura de diretórios fonte e as páginas geradas. Isso é útil quando você tem uma estrutura de projeto complexa. Por exemplo, digamos que você tenha um monorepo com vários pacotes e gostaria de colocar as documentações junto com os arquivos fonte desta forma:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>├─ packages</span></span>
|
|
|
<span class="line"><span>│ ├─ pkg-a</span></span>
|
|
|
<span class="line"><span>│ │ └─ src</span></span>
|
|
|
<span class="line"><span>│ │ ├─ pkg-a-code.ts</span></span>
|
|
|
<span class="line"><span>│ │ └─ pkg-a-docs.md</span></span>
|
|
|
<span class="line"><span>│ └─ pkg-b</span></span>
|
|
|
<span class="line"><span>│ └─ src</span></span>
|
|
|
<span class="line"><span>│ ├─ pkg-b-code.ts</span></span>
|
|
|
<span class="line"><span>│ └─ pkg-b-docs.md</span></span></code></pre></div><p>E você deseja que as páginas VitePress sejam geradas assim:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>packages/pkg-a/src/pkg-a-docs.md --> /pkg-a/index.html</span></span>
|
|
|
<span class="line"><span>packages/pkg-b/src/pkg-b-docs.md --> /pkg-b/index.html</span></span></code></pre></div><p>Você pode realizar isso configurando a opção <a href="./../reference/site-config#rewrites"><code>rewrites</code></a> assim:</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/config.js">.vitepress/config.js</span></div><div class="language-ts vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rewrites: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'packages/pkg-a/src/pkg-a-docs.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'pkg-a/index.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'packages/pkg-b/src/pkg-b-docs.md'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'pkg-b/index.md'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><p>A opção <code>rewrites</code> também suporta parâmetros de rota dinâmicos. No exemplo acima, seria verboso listar todos os caminhos se você tiver muitos pacotes. Dado que todos eles têm a mesma estrutura de arquivo, você pode simplificar a configuração assim:</p><div class="language-ts vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rewrites: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'packages/:pkg/src/(.*)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">':pkg/index.md'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Os caminhos de reescrita são compilados usando o pacote <code>path-to-regexp</code> - consulte <a href="https://github.com/pillarjs/path-to-regexp#parameters" target="_blank" rel="noreferrer">sua documentação</a> para uma sintaxe mais avançada.</p><div class="warning custom-block"><p class="custom-block-title">Links Relativos com Reescritas</p><p>Quando as reescritas estão habilitadas, <strong>links relativos devem ser baseados nos caminhos reescritos</strong>. Por exemplo, para criar um link relativo de <code>packages/pkg-a/src/pkg-a-code.md</code> para <code>packages/pkg-b/src/pkg-b-code.md</code>, deve-se usar:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-light-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline;">Link para PKG B</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">](</span><span style="--shiki-light:#24292E;--shiki-light-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline;">../pkg-b/pkg-b-code</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div></div><h2 id="dynamic-routes" tabindex="-1">Rotas Dinâmicas <a class="header-anchor" href="#dynamic-routes" aria-label="Permalink to "Rotas Dinâmicas {#dynamic-routes}""></a></h2><p>Você pode gerar muitas páginas usando um único arquivo Markdown e dados dinâmicos. Por exemplo, você pode criar um arquivo <code>packages/[pkg].md</code> que gera uma página correspondente para cada pacote em um projeto. Aqui, o segmento <code>[pkg]</code> é um <strong>parâmetro</strong> de rota que diferencia cada página das outras.</p><h3 id="paths-loader-file" tabindex="-1">Arquivo de Carregamento de Caminhos <a class="header-anchor" href="#paths-loader-file" aria-label="Permalink to "Arquivo de Carregamento de Caminhos {#paths-loader-file}""></a></h3><p>Como VitePress é um gerador de site estático, os caminhos possíveis das páginas devem ser determinados no momento da compilação. Portanto, uma página de rota dinâmica <strong>deve</strong> ser acompanhada por um <strong>arquivo de carregamento de caminhos</strong>. Para <code>packages/[pkg].md</code>, precisaremos de <code>packages/[pkg].paths.js</code> (<code>.ts</code> também é suportado):</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>└─ packages</span></span>
|
|
|
<span class="line"><span> ├─ [pkg].md # modelo de rota</span></span>
|
|
|
<span class="line"><span> └─ [pkg].paths.js # carregador de caminhos da rota</span></span></code></pre></div><p>O carregador de caminhos deve fornecer um objeto com um método <code>paths</code> como sua exportação padrão. O método <code>paths</code> deve retornar um <em>array</em> de objetos com uma propriedade <code>params</code>. Cada um desses objetos gerará uma página correspondente.</p><p>Dado o seguinte <em>array</em> <code>paths</code>:</p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// packages/[pkg].paths.js</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'foo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }},</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>As páginas HTML geradas serão:</p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>└─ packages</span></span>
|
|
|
<span class="line"><span> ├─ foo.html</span></span>
|
|
|
<span class="line"><span> └─ bar.html</span></span></code></pre></div><h3 id="multiple-params" tabindex="-1">Múltiplos Parâmetros <a class="header-anchor" href="#multiple-params" aria-label="Permalink to "Múltiplos Parâmetros {#multiple-params}""></a></h3><p>Uma rota dinâmica pode conter múltiplos parâmetros:</p><p><strong>Estrutura de Arquivo</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>└─ packages</span></span>
|
|
|
<span class="line"><span> ├─ [pkg]-[version].md</span></span>
|
|
|
<span class="line"><span> └─ [pkg]-[version].paths.js</span></span></code></pre></div><p><strong>Carregador de Caminhos</strong></p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'foo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'1.0.0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }},</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'foo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'2.0.0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }},</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'1.0.0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }},</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'bar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, version: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'2.0.0'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>Saída</strong></p><div class="language- vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>.</span></span>
|
|
|
<span class="line"><span>└─ packages</span></span>
|
|
|
<span class="line"><span> ├─ foo-1.0.0.html</span></span>
|
|
|
<span class="line"><span> ├─ foo-2.0.0.html</span></span>
|
|
|
<span class="line"><span> ├─ bar-1.0.0.html</span></span>
|
|
|
<span class="line"><span> └─ bar-2.0.0.html</span></span></code></pre></div><h3 id="dynamically-generating-paths" tabindex="-1">Gerando Caminhos Dinamicamente <a class="header-anchor" href="#dynamically-generating-paths" aria-label="Permalink to "Gerando Caminhos Dinamicamente {#dynamically-generating-paths}""></a></h3><p>O módulo de carregamento de caminhos é executado no Node.js e apenas durante o momento de compilação. Você pode gerar dinamicamente o <em>array</em> de caminhos usando qualquer dado, seja local ou remoto.</p><p>Gerando caminhos a partir de arquivos locais:</p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fs </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'fs'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fs</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readdirSync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'packages'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pkg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { params: { pkg }}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Gerando caminhos a partir de dados remotos:</p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pkgs</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://my-api.com/packages'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">json</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pkgs.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pkg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> params: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pkg: pkg.name,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> version: pkg.version</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="accessing-params-in-page" tabindex="-1">Acessando Parâmetros na Página <a class="header-anchor" href="#accessing-params-in-page" aria-label="Permalink to "Acessando Parâmetros na Página {#accessing-params-in-page}""></a></h3><p>Você pode usar os parâmetros para passar dados adicionais para cada página. O arquivo de rota Markdown pode acessar os parâmetros da página atual em expressões Vue através da propriedade global <code>$params</code>:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> nome do pacote: {{ $params.pkg }}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">-</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> versão: {{ $params.version }}</span></span></code></pre></div><p>Você também pode acessar os parâmetros da página atual através da API de tempo de execução <a href="./../reference/runtime-api#usedata"><code>useData</code></a>. Isso está disponível tanto em arquivos Markdown quanto em componentes Vue:</p><div class="language-vue vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// params é uma ref Vue</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">params</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(params.value)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="rendering-raw-content" tabindex="-1">Apresentando Conteúdo Cru <a class="header-anchor" href="#rendering-raw-content" aria-label="Permalink to "Apresentando Conteúdo Cru {#rendering-raw-content}""></a></h3><p>Parâmetros passados para a página serão serializados na carga JavaScript do cliente, portanto, evite passar dados pesados nos parâmetros, como Markdown cru ou conteúdo HTML obtido de um CMS remoto.</p><p>Em vez disso, você pode passar tal conteúdo para cada página usando a propriedade <code>content</code> em cada objeto de caminho:</p><div class="language-js vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paths</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> posts</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fetch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://my-cms.com/blog-posts'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">json</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> posts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">post</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> params: { id: post.id },</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content: post.content </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Markdown ou HTML cru</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Em seguida, use a seguinte sintaxe especial para apresentar o conteúdo como parte do próprio arquivo Markdown:</p><div class="language-md vp-adaptive-theme"><button title="Copiar código" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- @content --></span></span></code></pre></div>`,88)]))}const g=a(t,[["render",p]]);export{c as __pageData,g as default};
|
