Um guia para roteamento no SvelteKit

SvelteKit é uma estrutura para criar aplicativos da Web de todos os tamanhos, com grande experiência de desenvolvimento e roteamento baseado em arquivo flexível. A estrutura combina SEO de aplicativos de página única e benefícios de aprimoramento progressivo com a navegação rápida de aplicativos renderizados do lado do servidor. Um dos recursos críticos do SvelteKit é seu sistema de roteamento.

Compreendendo o roteamento do SvelteKit

SvelteKit é um framework construído em cima de Svelte. No SvelteKit, o roteamento segue um sistema baseado em arquivo. Isso significa que a estrutura de diretórios de suas páginas determina as rotas de seu aplicativo.

Para entender melhor o sistema de roteamento SvelteKit, primeiro crie um projeto SvelteKit. Para fazer isso, execute o seguinte código no seu terminal:

npm create svelte@latest my-app

Depois de executar o bloco de código acima, você responderá a uma série de prompts para configurar seu aplicativo.

Em seguida, instale as dependências necessárias para o seu projeto. Para fazer isso cd no seu projeto e execute:

npm install

Abra o projeto no servidor de desenvolvimento executando o seguinte comando em seu terminal:

npm run dev

Agora, seu projeto estará funcionando em http://localhost: 5173/. Ao abrir a aplicação em seu servidor de desenvolvimento, você terá uma interface semelhante a da imagem abaixo.

A rota raiz do projeto ‘/’ corresponde a um arquivo chamado +page.svelte. você pode encontrar o +page.svelte arquivo seguindo o caminho do arquivo; origens/rotas no seu projecto.

Para criar rotas diferentes no SvelteKit, você pode criar pastas em seu origens/rotas diretório. Cada pasta corresponderá a uma rota diferente. Gerar um +page.svelte arquivo em cada pasta para definir o conteúdo dessa rota.

<main>
<h2> This is the about page h2>
main>

O código acima ficará dentro do +página arquivo. Você criará um arquivo esbelto dentro do sobre pasta no origens/rotas diretório. Este arquivo conterá o conteúdo da rota. Para visualizar a rota em seu navegador da Web, navegue até http://localhost: 5173/sobre.

Navegando para o /about route exibirá esta interface em sua tela:

Compreendendo rotas aninhadas

As rotas aninhadas são uma maneira de estruturar o sistema de roteamento em um aplicativo da web. Em uma estrutura de rota aninhada, as rotas são colocadas dentro de outras rotas, criando um relacionamento hierárquico entre elas. Você pode criar rotas aninhadas no SvelteKit colocando pastas com o +page.svelte arquivo dentro de outras pastas de rota sob o origens/rotas diretório.

Por exemplo:

Neste exemplo, você aninha o publicar rota dentro do blogue rota. Para aninhar o publicar rota dentro do blogue rota, crie o publicar pasta e sua +page.svelte arquivo dentro do blogue pasta rota.

Para acessar a rota do blog em seu aplicativo, abra o navegador da Web e navegue até http://localhost: 5173/blog.

A via postal estará disponível em http://localhost: 5173/blog/postagem.

Layouts e Rotas de Erro

SvelteKit define um layout para o aplicativo de maneira semelhante ao Next.js. Ambas as estruturas usam um disposição para definir a estrutura do aplicativo.

SvelteKit usa o +layout.svelte para definir um layout para um grupo de páginas. Você pode criar um +layout.svelte arquivo no origens/rotas diretório para definir um layout para todas as páginas em seu aplicativo ou em um subdiretório para definir um layout para um grupo específico de páginas.

Aqui está um exemplo de como definir uma rota de layout para todo o seu aplicativo:

O exemplo acima fornece uma rota de layout. O arquivo contém um h1 elemento que exibe o texto "Este é um aplicativo SvelteKit." Também inclui um slot elemento. O slot element é um elemento especial que define o local onde a aplicação renderizará o conteúdo de suas rotas dentro do layout. Funciona da mesma forma que os componentes Vue.

Nesse caso, seu aplicativo renderizará o conteúdo de suas rotas abaixo do h1 elemento.

Para definir uma página de erro, crie um arquivo chamado +error.svelte no origens/rotas diretório. Esta página será exibida quando ocorrer um erro durante a renderização.

Por exemplo:

Quando você encontrar um erro, como navegar para uma rota inexistente, seu aplicativo retornará a este erro rota em vez disso.

Por exemplo:

O percurso http://localhost: 5173/ir não existe, então o aplicativo renderiza o erro rota em vez disso.

Navegando entre páginas

Encontrar a melhor forma de navegar entre os percursos que cria é crucial para uma boa experiência. Tradicionalmente, o roteamento baseado em arquivo na maioria das tecnologias usa links para navegar entre diferentes páginas. Para navegar entre as páginas no SvelteKit, você pode usar uma tag de âncora HTML simples.

Por exemplo, você pode escrever este código em qualquer rota que desejar, mas deve escrevê-lo no disposição rota acima do slot marcação:

<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>

Clicar em qualquer marca de âncora o levará à rota correspondente.

Roteamento Dinâmico no SvelteKit

O roteamento dinâmico permite que você crie progressivamente rotas que o aplicativo gera com base em dados ou parâmetros. Ele permite que você crie aplicativos da web flexíveis e dinâmicos que lidam com diferentes rotas e exibem conteúdo de acordo com dados ou parâmetros específicos.

Para criar uma rota dinâmica no SvelteKit, crie uma pasta chamada [lesma] e então um +page.svelte arquivo na pasta para definir o conteúdo da rota. Observe que você pode nomear a pasta como quiser, mas certifique-se de sempre colocar o nome entre colchetes [ ].

Aqui está um exemplo de uma rota dinâmica:

Para acessar esta rota em seu navegador da Web, navegue até este link http://localhost: 5173/[slug], onde [lesma] pode ser qualquer nome de rota indefinido exclusivo que você escolher.

Você pode acessar o seu aplicativo [lesma] parâmetro usando o $page.params dados de $aplicativo/lojas.

Por exemplo:

<scriptlang='ts'>
 import { page } from '$app/stores'
 const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>

Aqui, você atribui o $page.params objetar ao parâmetro variável e renderizar o param.slug dados em seu aplicativo.

O aplicativo recupera o param.slug dados do seu link. Por exemplo, se você navegar para http://localhost: 5173/fogo, o conteúdo exibido no aplicativo será "Esta é a página de fogo."

Agora você conhece os fundamentos do roteamento no SvelteKit

O roteamento no SvelteKit é um recurso poderoso que permite estruturar seu aplicativo de uma maneira que faça sentido. Entender como usar esse recurso permitirá que você crie aplicativos da Web mais eficientes e fáceis de usar. Seja criando um pequeno projeto pessoal ou um aplicativo de grande escala, o sistema de roteamento do SvelteKit possui as ferramentas necessárias para o sucesso.